JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box1">
  <div class="box2">
    123<br>
    123<br>
    123<br>    
  </div>
</div>

<hr>

<div class="box3">
  <div class="box4">
    123<br>
    123<br>
    123<br>    
  </div>
</div>

<hr>

<div class="box5">
  <div class="box6">
    123<br>
    123<br>
    123<br>    
  </div>
</div>

CSS

.box1 {
  border:1px solid #333;
}
.box2 {
  border:1px solid red;
}

.box3 {
  border:1px solid #333;
}
.box4 {
  height: 10px;
  display:inline-block;
  border:1px solid red;
}

.box5 {
  border:1px solid #333;
}
.box6 {
  height: 10px;
  display:inline-block;
  border:1px solid red;
  overflow:auto; /* could also use hidden */
}