JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
  <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>
</body>
</html>

CSS

#scrollable {
            width : 50%;
            height : 350px;
            background-color: #d0e4fe;
            overflow-x: scroll;
            overflow-y: hidden;

        }
        .childDiv {
            float: left;

        }
        .inner {
            float : left;
        }