JSFiddle - React, Tailwind, and code Playground

by InferOn

HTML

<div class = "Table">
   <div class = "Row">
      <div class = "Cell">Name</div>
      <div class = "Cell">Info</div>
      <div class = "Cell scrollable">A lot of content, content, content, content, contentA lot of content, content, content, content, contentA lot of content, content, content, content, content</div>
      <div class = "Cell">Phone Number</div>
   </div>
    <div class = "Row">
      <div class = "Cell scrollable">A lot of content, content, content, content, contentA lot of content, content, content, content, contentA lot of content, content, content, content, content</div>
      <div class = "Cell">Name</div>
      <div class = "Cell">Info</div>
      <div class = "Cell">Phone Number</div>
   </div>
</div>

CSS

.Table{ display: table ; }
 .Row{display: table-row; }
 .Cell{width:100px;display:inline-block;float:left;height:50px;border:1px solid red;}
.scrollable{ overflow-x:scroll; white-space:nowrap;}