JSFiddle - React, Tailwind, and code Playground

HTML

<div id="table1" class='table-div'>
  <!-- table caption. Note: this is not expanding to full width of table -->
  <div class='table-caption-div'>Fruits</div>
  
  <!-- table head -->
  <header class='table-row-div'>
    <div class="table-cell-div">Name</div>    
    <div class="table-cell-div">Price</div>    
    <div class="table-cell-div">Min. Quantity</div>    
  </header>

  <!-- table-rows -->
  <div class='table-row-div'>
    <div class="table-cell-div">Banana</div>
    <div class="table-cell-div">$0.60</div>
    <div class="table-cell-div">10lbs</div>
  </div>
  <div class='table-row-div'>
    <div class="table-cell-div">Apples</div>
    <div class="table-cell-div">$1.30</div>
    <div class="table-cell-div">15lbs</div>
  </div>
  
  <!-- Note: this is also not expanding to full width of table -->
  <div class='full-width-row'>
    hmmmm.. yummy!!
  </div>
  
  <div class='table-row-div'>
    <div class="table-cell-div">Grapes</div>
    <div class="table-cell-div">$4.00</div>
    <div class="table-cell-div">5lbs</div>
  </div>
  <!-- Note: this is also not expanding to full width of table -->
  <div class='full-width-row'>
    Order some now!!
  </div>
</div>

CSS

.table-div {
  display: table;
  width: 300px;
  color: #000;
  font-size: 90%;
  text-align: center;
}

.table-caption-div {
  display: block;
  background-color: green;
  width: 100%;
  color: #eee;
}

.full-width-row {
  width: 100%;
  background-color: lightblue;
}

#table1 {
  border: 2px solid orange;
}

.table-div header {
  font-weight: bold;
}

.table-row-div {
  display: table-row;
  background-color: #fff;
  border-top: 1px solid black;
}

.table-row-div:last-child .table-cell-div {
  border-bottom: 0;
}

.table-cell-div {
  display: table-cell;
  padding: 5px;
  border-width: 0px 1px 1px 0;
  border-style: solid;
  border-color: #000
}

.table-cell-div:last-child {
  border-right: 0
}