JSFiddle - React, Tailwind, and code Playground

by isherwood

HTML

<div id="top-title">
  <div id="header-titles">
    <h2 class="title-bar" id="tip-title">
      The Title That is Here
    </h2>
    
    <i id="title-subheader">I'm a subheading!</i>
  </div>
  
  <div id="header-image">
    <img id="pic-img" src="https://via.placeholder.com/300">
  </div>
</div>

CSS

#tip-title {
  font-size: 4.5vw;
  margin-bottom: 0%;
}

#pic-img {
  height: 10vw;
  width: 19.15vw;
}

#title-subheader {
  font-size: 2vw;
}

#top-title {
  text-transform: capitalize;
  line-height: normal;
  text-align: right;
}

#header-titles {
  width: 65%;
  margin-left: 10%;
  display: block;
  text-align: left;
}

#header-image {
  width: 20%;
  margin-right: 5%;
  display: inline;
  text-align: right;
}