JSFiddle - React, Tailwind, and code Playground

by web tiki

HTML

<div id="scrollable">
    <div class="childDiv">
        <div class="inner">I am the first div in first should appear inline with the rest of the text</div>
        <div class="inner">I am the second div in first should appear inline with the rest of the text</div>
    </div>
    <div class="childDiv">
        <div class="inner">I am the first div in Second should appear inline with the rest of the text</div>
        <div class="inner">I am the second div in Second should appear inlinewith the rest of the text</div>
    </div>
</div>

CSS

#scrollable {
      width : 50%;
      height : 350px;
      background-color: #d0e4fe;
      overflow-x: scroll;
      overflow-y: hidden;
     white-space:nowrap;
  }
  .childDiv {
      display:inline-block;
    white-space:nowrap;
  }
  .inner {
      display:inline-block;
   
  }