JSFiddle - React, Tailwind, and code Playground

by Himanshu Joshi

HTML

<div class="parent">
  <div class="left_info">
    <div class="info_top">
      <span class="info_item location">RiverSide Park</span>
       <span class="info_item small_grey_font">Public Park</span>
    </div>
    <div class="left_info_bottom">
      <span class="small_grey_font">1 mi</span>
      <span class="small_grey_font">(123)456-7890</span>
      <span class="small_grey_font">234 Tennis St.</span>
      <span class="small_grey_font">City, State, 0000</span>
    </div>
  </div>
  <div class="divider"></div>
  <div class="right_info">
    <div class="info_top">
        <span class="info_item small_grey_font">Today</span>
        <span class="info_item small_grey_font">9am-9pm</span>
        <span class="info_item small_red_font">Open Now</span>
        <span></span>
    </div>
  </div>
</div>

CSS

span{
   font-family: "Avenir Next" !important;
}
.parent{
  width: 350px;
  height: 100px;
  display:flex;
  position: relative;
 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 padding: 10px;
}
.left_info{
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.info_top{
  flex-grow:1;
  display:flex;
  flex-direction: column;
}
 .info_item{
   //flex-grow:1;
   align-self: flex-start;
   flex-basis: auto;
 }
 .location{
   color: #4dd2ff;
   font-weight: 600;
 }
.left_info_bottom{
 // flex-grow:1;
  display:flex;
  flex-direction: column;
}
.right_info{
//  flex-grow: 1;
  display: flex;
}
.small_grey_font{
  font-size: 13px;
  color:#999999
}
.small_red_font{
  font-size: 15px;
  color: #ff3333;
  font-style: italic;
}
.info_item_left{
  justify-content: flex-start;
}
.info_item_left{
  justify-content: flex-end;
}
.divider {
    position: absolute;
    left: 50%;
    top: 10%;
    bottom: 10%;
    border-left: 1px solid #999999;
}