JSFiddle - React, Tailwind, and code Playground

by michananya

HTML

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap" rel="stylesheet">

<div class="tr">
  <div class="th">Title</div>
  <div class="th">Title</div>
  <div class="th">Title</div>
  <div class="th">Title</div>
</div>

CSS

body {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;

}
.tr {
  display: flex;
  flex-wrap: nowrap;

}
.th {
  width: 200px;
  height: 20px;
  background: #dbdbdb;
  position: relative;
  padding: 7px;
  font-weight: 700;
  color: #666666;
}

.th:after {
  content: '';
  width: 1px;
  height: 20px;
  background: #bbbbbb;
  position: absolute;
  right: 0px;
  top: 7px;
  Cursor: ew-resize	;
}
.th:last-child:after {
  display: none;
}

.th:after:hover {
  content: '';
  width: 10px;
  height: 20px;
  background: #bbbbbb;
  position: absolute;
  right: 0px;
  top: 7px;
  Cursor: ew-resize	;
}