JSFiddle - React, Tailwind, and code Playground

HTML

<div class="w50" id="container">
    <div class="field w50">
        <input type="text" size="100" value="input field that overflows @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@">
    </div><div class="field w50">
        content
    </div>
    
    <div class="field w100">
        content
    </div>
</div>

CSS

#container {
  border: 2px solid black;
}

.field {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  x-sizing: border-box;
  display: inline-block;
  padding: 0 5px;
  border: 5px solid #FC0;
  line-height: 1.5em;
}

.w50 { width: 50%; }
.w100 { width: 100%; }