title: Flexbox grow is not making one element fill all of the empty space, and some magic whitespace is being made
body: <p>I want to achieve it so that the email box stretches all the way and touches the sign up button.</p>
  <p><a href="https://i.stack.imgur.com/JMi4k.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JMi4k.png" alt="screenshot" /></a></p>
  <p>Here is my code which I have used to try and do it right now:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;mb-12 inline-block&quot;&gt;
      &lt;h1 class=&quot;text-7xl font-bold mt-9&quot;&gt;A better way to&lt;/h1&gt;
      &lt;h1 class=&quot;indent-9 text-7xl font-bold text-[#6E6BFF]&quot;&gt;store your code&lt;/h1&gt;
  
      &lt;div class=&quot;mt-12 max-w-[610px]&quot;&gt;
          &lt;p class=&quot;mb-8&quot;&gt;With RepoZoid, storing your own code is as easy as pie. Just add a new entry, paste your code in - and you're off to the races.&lt;/p&gt;
          &lt;p&gt;It's as simple as 1, 2, 3 - with sharing options and more coming in the future!&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div class=&quot;flex flex-row&quot;&gt;
          &lt;div class=&quot;grow&quot;&gt;
              &lt;input class=&quot;w-[100%] text-[#9c9ea5] py-3 px-4 rounded-md&quot; placeholder=&quot;Enter your email&quot; type=&quot;email&quot; name=&quot;emailinput&quot;&gt;
          &lt;/div&gt;
  
          &lt;div class=&quot;flex grow justify-end&quot;&gt;
              &lt;button class=&quot;px-4 py-3 rounded-md bg-[#6E6BFF] text-white&quot;&gt;Sign Up&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Am I doing anything wrong?</p>
  <p>Kind Reguards,
  <br>Henry.</p>