JSFiddle - React, Tailwind, and code Playground

by Laxmikant Dange

HTML

<div class="header">Refresh this site from the AutoCADPID</div>
<div class="box">
  <div class="left">
    <div class="header">
      <label>
      <input type="checkbox" >
      Available Data Sets
    </label>
    </div>
    <div>
      <div><label for=""><input type="checkbox" name="" id="">Sample Text</label></div>
      <div><label for=""><input type="checkbox" name="" id="">Sample Text</label></div>
      <div><label for=""><input type="checkbox" name="" id="">Sample Text</label></div>
      <div><label for=""><input type="checkbox" name="" id="">Sample Text</label></div>
      <div><label for=""><input type="checkbox" name="" id="">Sample Text</label></div>
      <div><label for=""><input type="checkbox" name="" id="">Sample Text</label></div>
      <div><label for=""><input type="checkbox" name="" id="">Sample Text</label></div>
    </div>
  </div>
  <div class="right">
    <div class="header">Rreplication Result</div>
    <table>
      <thead>
        <tr>
          <th>Group</th>
          <th>List</th>
          <th>Name</th>
          <th>Action</th>
          <th>Message</th>
          <th>TimeStamp</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Pipe</td>
          <td>????</td>
          <td>Duplicate</td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td>2</td>
          <td>Pipe</td>
          <td>????</td>
          <td>Duplicate</td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td>3</td>
          <td>Pipe</td>
          <td>????</td>
          <td>Duplicate</td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td>4</td>
          <td>Pipe</td>
          <td>????</td>
          <td>Duplicate</td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td>5</td>
          <td>Pipe</td>
          <td>????</td>
          <td>Duplicate</td>
          <td></td>
          <td></td>
       ...

CSS

body {
  margin: 0;
  padding: 0;
}

.header {
  border-bottom: 1px solid darkgray;
  padding: 2px;
  height:1em;
}

table {
  width: 100%;
}

table thead tr {
  padding: 0;
  margin: 0;
  background-color: gray;
  border-right: 1px solid black;
}

.box {
   display:flex;
}

.box .right{
  flex:5;
    border: 1px solid darkgray;
}
.box .left {
  flex:1;
  border: 1px solid darkgray;
}