JSFiddle - React, Tailwind, and code Playground

HTML

<h3>This looks correct:</h3>
<div class="container">
  <input type="button" value="47">
  <input type="button" value="48">
  <input type="button" value="49">
  <input type="text" size="5" maxlength="5" value="50">
  <input type="button" value="51">
  <input type="button" value="52">
  <input type="button" value="53">
</div>

<h3>But results in this:</h3>
<div class="container">
  <input type="text" size="5" maxlength="5" value="1">
  <input type="button" value="2">
  <input type="button" value="3">
  <input type="button" value="4">
</div>
      
<h3>This kinda works but requires manually specifying widths:</h3>
<div class="container">
  <div class="left">
      <input type="button" value="47">
      <input type="button" value="48">
      <input type="button" value="49">
  </div>
  <div class="right">
      <input type="button" value="51">
      <input type="button" value="52">
      <input type="button" value="53">
  </div>
  <div class="center">
      <input type="text" size="5" maxlength="5" value="50">
  </div>
</div>
<br/>
<div class="container">
  <div class="left">
      <input type="button" value="1">
  </div>
  <div class="right">
      <input type="button" value="3">
      <input type="button" value="4">
      <input type="button" value="5">
  </div>
  <div class="center">
      <input type="text" size="5" maxlength="5" value="2">
  </div>
</div>

CSS

.container:after {
    content:"";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 50%;
    border-left: 2px dotted #ff0000;
}
.container, input {
    text-align: center;
}
.left {
    width: 40%;
    float: left;
    text-align: right;
}
.right {
    width: 40%;
    float: right;
    text-align: left;
}
.center {
    width: 20%;
    margin-left: 40%;
}