JSFiddle - React, Tailwind, and code Playground

by michananya

HTML

<div class=header>
  <div class="search1">Search 1</div><!--
  --><div class="replace">
    <span></span>
  </div><!--
  --><div class="search2">Search 2</div><!--
  --><div class="preview-header">Preview</div><!--
  --><div class="clear">
    <span></span>
  </div>
</div>

<table>
  <tr>
    <th class="Order1">Order A</th>
    <th class="Order2">Order B</th>
    <th class="preview">PREVIEW</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

CSS

.header {
  Width: 100%;
  vertical-align: center;
}
.header > div {
  display: inline-block;
}

.search1 {
  width: 31%;
}

.replace {
  width: 4%;
  margin: auto;
}

.replace > span {
  Display: block;
  width: 36px;
  height: 36px;
  border: 1px solid #ccc;
  border-radius: 50%;
  margin: auto;
}

.search2 {
  width: 31%;
}

.preview-header {
  width: 30%;
}

.clear {
  width: 4%;
  

}
.clear > span {
  Display: block;
  width: 36px;
  height: 36px;
  border: 1px solid #ccc;
  border-radius: 50%;
float: right;
}

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

}

table {
  width: 100%;
}
th {
  text-align: left;
}
.Order1 {
  width: 33%;
}
.Order2 {
  width: 33%;
}
.preview {
  width: 34%;
}