JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="_my-heading">
  <h2>Latest News</h2>
  <div>All news</div>
</div>

CSS

body {
  margin: 0;
}
* {
  box-sizing: border-box;
}
div._my-heading {
  max-width: 1400px;
  margin: auto;
}
div._my-heading:after {
  content: '';
  display: table;
  clear: both;
}
div._my-heading h2 {
  font-size: 30px;
  font-weight: bold;
  position:relative;
  float: left;
}
div._my-heading h2:after {
  content: '';
  width: 100%;
  height: 4px;
  background: #00A4DD;
  left: 0;
  bottom: -4px;
  position: absolute;
}
div._my-heading div {
  float: right;
  font-size: 16px;
  font-weight: bold;
  padding-top: 7px;
  position :relative;
  z-index: 5;
}
div._my-heading div:after {
  content: '';
  width: 100%;
  height: 4px;
  background: #00A4DD;
  left: 0;
  bottom: -4px;
  position: absolute;
}