JSFiddle - React, Tailwind, and code Playground

HTML

<div class="training">
  <div class="column1"></div>
  <div class="column2"></div>
  <div class="column3"></div>
  <div class="myrow">
    <div class="mycelltitle">TITLE1:</div>
    <div class="mycelldescrip">Description 1</div>
       <div class="mycellmap"><iframe src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Mojave+Sportsmen%E2%80%99s+Club+Seven+Mile+Shooting+3155+W.+Oatman+Road,+Golden+Valley,+AZ+&amp;aq=&amp;sll=35.126024,-114.148784&amp;sspn=3.989275,8.453979&amp;ie=UTF8&amp;hq=mojave+sportsmen's+club+seven+mile+shooting+3155+w+oatman+road&amp;hnear=Golden+Valley,+Mohave,+Arizona&amp;t=m&amp;ll=35.126024,-114.148784&amp;spn=0.214076,0.163299&amp;output=embed" height="350" width="425" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe></div> 
  </div>
       
  <div class="myrow">
    <div class="mycelltitle">TITLE2:</div>
    <div class="mycelldescrip">Description 2</div>
  </div>
  <div class="myrow">
    <div class="mycelltitle">TITLE3:</div>
    <div class="mycelldescrip">Description 3</div>  
  </div>
</div>

CSS

.training {
    /*overflow:hidden;*/
    width:950px;
    display: table;
    border-collapse: collapse;
}
.myrow {
  display: table-row;
}
.mycelltitle {
  display: table-cell;
  width:60px;
  text-align: right;
  padding: 5px;
}
.mycelldescrip {
  display: table-cell;
  width:490px;
}
.mycellmap {
  display: table-cell;
  width:400px;
  vertical-align: middle;
}
.column1 {
  display: table-column;
  background-color: green;
}
.column2 {
  display: table-column;
  background-color: red;
}
.column3 {
  display: table-cell;
  background-color: black;
}