JSFiddle - React, Tailwind, and code Playground

by maciejgurban

HTML

<h3 class="title flex-title">
  <span class="title-main">Search input</span>
  <span class="close">X</span>
  <span class="title-note">Filter Filter Filter Filter.</span>
</h3>

SCSS

body {
  padding: 100px;
  font-size: 21px;
}

.title {
  border-bottom: 1px solid #ccc;
  margin: 40px auto;
}
.title-note {
  font-size: 60%;
  color: #999;
}

.flex-title {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  .title-main {
    white-space: nowrap;
    flex-grow: 1;
    
  }
  .close {
    width: 30px;
  }
  .title-main {
    flex-grow: 1;
  }
}