JSFiddle - React, Tailwind, and code Playground

by Alex Slepenkov

HTML

<div class="table">
<div class="col-left">
<p>
22222222222222222222222
</p>
<p>
22222222222222222222222
</p>
<p>
22222222222222222222222
</p>
<p>
22222222222222222222222
</p>
<p>
22222222222222222222222
</p>
</div>
<div class="col-center">
11111111111111111111111111111
</div>
<div class="col-right">
11111111111111111111111111111
</div>
</div>

CSS

.table {
  display:table;
  width:99%;
  margin:0 auto;
}
.col-left {
  display:table-cell;
  border:2px solid red;
  max-width:100%;
  width:200px;
}
.col-center {
  display:table-cell;
   border:2px solid red;
   max-width:100%;
   width:60%;
}
.col-right {
  display:table-cell;
   border:2px solid red;
   max-width:100%;
   width:200px;
}
@media (max-width:900px) {
  .col-center {
  display:table-cell;
   border:2px solid red;
   max-width:100%;
   width:80%;
}
  .col-right {
  display:table-row;
   border:2px solid red;
   width:100%;
   height:100px;
}
	}