JSFiddle - React, Tailwind, and code Playground

by danield770

HTML

<div id="entire-Header">
    <img id="the-logo" src="http://placehold.it/150x60" />
     <h2 id="the-h2-Title">
      <div id="headlineTextbox">This is a Test Headline</div>
   </h2>

    <div id="the-lines"></div>
</div>

<div id="entire-Header">
    <img id="the-logo" src="http://placehold.it/150x60" />
     <h2 id="the-h2-Title">
      <div id="headlineTextbox">This is a different Test Headline</div>
   </h2>
    <div id="the-lines"></div>
</div>

<div id="entire-Header">
    <img id="the-logo" src="http://placehold.it/150x60" />
     <h2 id="the-h2-Title">
      <div id="headlineTextbox">Another Headline</div>
   </h2>
    <div id="the-lines"></div>
</div>

CSS

#entire-Header {
    display:inline-block;
    width: 100%;
    height:40px;
    margin: 50px 0;
}
#the-h2-Title {
    float: left;
    padding-right: 10px;
}
#the-lines {
    border-top: 4px solid #000000 !important;
    border-bottom: 4px solid #000000 !important;
    height: 1px;
    overflow: hidden;
    margin-top: 23px;
}
#the-logo {
    width: 160px;
    height: 50px;
    padding-left: 10px;
    float: right;
}