JSFiddle - React, Tailwind, and code Playground

by Rahul Sharma

HTML

<div class="container">

      <span class="title">
        Card header
      </span>

      <button class="action-button">
        Action
      </button>

    </div>

    <br/>

    <div class="container">

      <span class="title small-screen">
        Card header title here is longer
      </span>

      <button class="action-button">
        Action
      </button>

    </div>

CSS

.container {
      padding: 35px 2px;
      border: 1px solid gray;
    }

    .title {
      font-size: 18px;
    }

    .action-button {
      float: right;
      height: 50px;
      width: 100px;

    }

    .small-screen {
      width: 160px;
      display: inline-block;
    }