JSFiddle - React, Tailwind, and code Playground

by mmis1000

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container">
  <div class="row">
    <div class="col col-lg-12 col-md-12 col-xs-12">
      <table class="outer-table">
        <tr>
          <td>Type 1</td>
          <td class="td-2">Item 1</td>
        </tr>
        <tr>
          <td>Type 2</td>
          <td class="td-2">
            <div class="wrap">
              <table class="inner-table">
                <tr>
                  <td>Subtype 1</td>
                  <td>Subitem 1</td>
                </tr>
                <tr>
                  <td>Subtype 2</td>
                  <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat aliquaorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat aliquaorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat aliquaorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat aliquam lsi.</td>
                </tr>
              </table>
            </div>
          </td>
        </tr>
      </table>
    </div>
   </div>
</div>

CSS

.row {
  background: #eee;
  margin-top: 20px;
}

.col {
  padding: 10px;
}

table {
  border-collapse: collapse;
}

table, th, td {
  border: 1px solid black;
}

.outer-table {
  width: 100%;
  max-width: 100%;
}

.td-2 {
}

.wrap {
  max-width: 100%;
  overflow: auto;
}

.inner-table {
  white-space: nowrap;
}