title: How does Form layout exactly work?
body: <p>I have a simple form, that looks as following:</p>
  
  <p><a href="https://i.stack.imgur.com/Y47GS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Y47GS.png" alt="enter image description here"></a></p>
  
  <p>the code:</p>
  
  <pre><code>&lt;VBox class="sapUiSmallMargin"&gt;
      &lt;sf:SimpleForm id="PayerSel" editable="true" layout="ResponsiveGridLayout" labelSpanXL="1" labelSpanL="1" labelSpanM="1" labelSpanS="12"
          adjustLabelSpan="false" emptySpanXL="5" emptySpanL="5" emptySpanM="5" emptySpanS="0" columnsXL="1" columnsL="1" columnsM="1"
          singleContainerFullSize="false"&gt;
          &lt;sf:content&gt;
              &lt;Label text="Payers"&gt;&lt;/Label&gt;
              &lt;Input id="payerFrom" placeholder="From" required="true"/&gt;
              &lt;Input id="payerTo" placeholder="Until" required="true"/&gt;
          &lt;/sf:content&gt;
      &lt;/sf:SimpleForm&gt;
  &lt;/VBox&gt;
  </code></pre>
  
  <p>The questions are:</p>
  
  <ul>
  <li>How to configure that both inputs have same length?  </li>
  <li>When I change <code>columnsL="1"</code> to <code>columnsL="4"</code>, why the input is
  getting smaller? I give more space and expect it to be wider, because I give to space.</li>
  </ul>