title: Input go down after I changed his value
body: <p>I never seen this problem before, hope some can help.
  When I change input value attribution from <code>S</code> to <code>G</code> using jquery the input go down.</p>
  
  <p><strong>Edit:</strong> I found the problem, I just needed to add to the main div of the inputs this css:</p>
  
  <pre><code>display:inline-flex;
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('body').on("click", "#submit", function() {
    $('#input1').attr('value', 'G');
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;input class="inputs" id="input1" type="button" value='S' maxlength="1" /&gt;
  &lt;input class="inputs" id="input2" type="button" value='T' maxlength="1" /&gt;
  
  &lt;input type="submit" id="submit" maxlength="1" value="change"/&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This code is almost the same to my code (instead of my inputs css)
  the result in my code: (image)
  <a href="https://i.stack.imgur.com/i26N8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/i26N8.png" alt="enter image description here"></a></p>
  
  <p>you can see in the image how to inputs that I changed their value go down, and the empty inputs stay in place.</p>