JSFiddle - React, Tailwind, and code Playground

by YiuJia

HTML

<html>
  <head></head>
  <body>
    <div class="flex">
      <div id="menu">
        <ul>
          <li>Item</li>
          <li>Item</li>
          <li>Item</li>
          <li>Item</li>
          <li>Item</li>
          <li>Item</li>
        </ul>
      </div>
      <div class="expand">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim iusto ab, omnis voluptas laborum unde, incidunt aliquid, laudantium harum, distinctio perspiciatis! Quae alias, deleniti quia iure aut delectus optio esse.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim iusto ab, omnis voluptas laborum unde, incidunt aliquid, laudantium harum, distinctio perspiciatis! Quae alias, deleniti quia iure aut delectus optio esse.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim iusto ab, omnis voluptas laborum unde, incidunt aliquid, laudantium harum, distinctio perspiciatis! Quae alias, deleniti quia iure aut delectus optio esse.</p>
      </div>
    </div>
  </body>
</html>

CSS

#menu {
  min-width: 200px;
}

.flex {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.expand {
  flex-grow: 2;
}