title: style="width:100%" is stretching the containing div. I don't want it to
body: <p>My real project isn't using embedded styling or background colours. Those have been added for troubleshooting purposes only.</p>
  
  <p>Starting with the code below, everything is fine, except the second text input feels a bit short. All the other text inputs stretch to fill the browser window. I don't want it to do that, but I would like it just to fill the section I coloured in red. So stretch all the way to the right, but not all the way to the left.
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;label for="phoneNumber"&gt;Home Phone&lt;/label&gt;
  &lt;div style="background:blue;"&gt;
   &lt;div style="background:yellow; float:left;"&gt;(&lt;input style="width:20px;" type="tel" name="ext" id="phoneNumberExt" autocomplete="tel"&gt;)&lt;/div&gt;
   &lt;div style="background:red;"&gt;&lt;input type="tel" name="phone" id="phoneNumber" autocomplete="tel"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Given that I would like the text input to fill 100% of the parent div (i.e. area in red), my first instinct is to write <code>style="width:100%;"</code> but this does not have the desired result. See below.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;label for="phoneNumber"&gt;Home Phone&lt;/label&gt;
  &lt;div style="background:blue;"&gt;
   &lt;div style="background:yellow; float:left;"&gt;(&lt;input style="width:20px;" type="tel" name="ext" id="phoneNumberExt" autocomplete="tel"&gt;)&lt;/div&gt;
   &lt;div style="background:red;"&gt;&lt;input style="width:100%;" type="tel" name="phone" id="phoneNumber" autocomplete="tel"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How do I make the text input fill the area shown in red?</p>