JSFiddle - React, Tailwind, and code Playground

by Kirubel Girma

HTML

<div class="topTtl">
  <div class="dateTtl">Exported on 08/07/2020</div>
  <div class="headerBlock">
    <div class="ttle"><b>RaceDay Report</b> : Miami Tri Plan #1</div>
  </div>
  <div class="headerDetails">
    <div><b>Event Start:</b><br>00:00 AM</div>
    <div><b>Race Date:</b><br>00/00/0000</div>
    <div><b>Race Location:</b><br>3890 E Ponce de Leon Ave, Atlanta, GA 30030</div>
  </div>
</div>

CSS

*{
  font-family: arial
  }

.dateTtl {
  text-align: right;
  margin-bottom: .5em;
  font-size: .8em;
}

.headerBlock {
  border-radius: .3em;
  display: flex;
  width: 100%;
  height: 3em;
  background: #3ACCE1;
  /* Change the color depending on the Race Type */
}

.headerDetails {
  margin-top: .5em;
  margin-left: 1em;
  font-size: .9em;
  display: flex;
  justify-content: space-between;
}

.ttle {
  color: white;
  font-size: 1.1em;
  display: flex-start;
  margin-top: auto;
  margin-bottom: auto;
  margin-left: 1em;
}