buttons equally space between them (horizontally)
<p>My code is</p>

<pre><code>&lt;div class="buttons"&gt;
&lt;input id="date" type="date" name="Date"&gt;
&lt;button id="ShowAll"&gt;Show All&lt;/button&gt;
&lt;button id=" showvalid"&gt;Show Valid&lt;/button&gt;
&lt;button id=" showpending"&gt;Show Pending&lt;/button&gt;
&lt;button id=" save"&gt;Save&lt;/button&gt;
&lt;button id=" clear"&gt;Clear&lt;/button&gt;
&lt;button id=" downloadascsv"&gt;Download As CSV&lt;/button&gt;
</code></pre>

<p></p>

<p>I want those input date and buttons equi space horizontally in <code>class="buttons"</code> div. I tried many tricks from google but none worked as those buttons were not of equi width. I tried placing buttons in separate div's and make div's as width=14.2(100/7) but I got result as shown below<a href="https://i.stack.imgur.com/JRwA7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JRwA7.png" alt="enter image description here"></a> that didnt worked as all buttons are not of equal width. Basically by expectation is as show<a href="https://i.stack.imgur.com/8Ig2i.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8Ig2i.png" alt="enter image description here"></a>
Where 'd' is the any equi distance between the elements.
In this case I have buttons, what should I do if I have <code>display:block</code> or <code>inline</code> or <code>inline-block</code> elements to space equal horizontally and to space equal vertically. Please give your answers for responsive webpage.</p>