title: CSS way to align form's input elements, based on the widest label
body: <p>Suppose I have a form:</p>
  <pre><code>&lt;form action=&quot;#&quot;&gt;
    &lt;p&gt;
      &lt;label for=&quot;name&quot;&gt;Name:&lt;/label&gt;
      &lt;input type=&quot;text&quot; placeholder=&quot;John Smith&quot; /&gt;
    &lt;/p&gt;
  
    &lt;p&gt;
      &lt;label for=&quot;name&quot;&gt;What do you think about him?:&lt;/label&gt;
      &lt;input type=&quot;text&quot; placeholder=&quot;Your opinion&quot; /&gt;
    &lt;/p&gt;
  
    &lt;p&gt;
      &lt;label for=&quot;name&quot;&gt;Another Text Input:&lt;/label&gt;
      &lt;input type=&quot;text&quot; placeholder=&quot;John Smith&quot; /&gt;
    &lt;/p&gt; 
  &lt;/form&gt; 
  </code></pre>
  <p>With the following CSS:</p>
  <pre><code>form {
    width: 400px;
  }
  
  p {
    display: flex;
  }
  
  label {
    margin-right: 10px;
  }
  
  input {
    flex-grow: 1;
  }
  </code></pre>
  <p>It looks the following way:</p>
  <p><a href="https://i.stack.imgur.com/Ft6PL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ft6PL.png" alt="enter image description here" /></a></p>
  <p>I need to align the right side of inputs, based on the widest label. That's what I want:</p>
  <p><a href="https://i.stack.imgur.com/dljOq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dljOq.png" alt="enter image description here" /></a></p>
  <p>I don't know label's width beforehand, so bootstrap-like solutions with columns are not good here. Is there pure HTML/CSS way to achieve it, without using JS?</p>
  <p><strong>PS!!</strong>: <strong>And I don't want to use <code>table</code></strong></p>