JSFiddle - React, Tailwind, and code Playground

by inser

HTML

<div class="card">
  <div class="header">
    <div class="media">
      TEST
    </div>
    <div class="title-container">
      <h2 class="title">
        This is the the long long long long long long long long long long long long long title
      </h2>
    </div>
    <div class="controls">
      <button>
        Test
      </button>
    </div>
  </div>
  <div class="content">
    <span class="label">Label for:</span>
    <span class="value">This is the value</span>
  </div>
</div>

CSS

.card {
  max-width: 100%;
}

.header {
  display: flex;
}

.title-container {
  flex: 1;
}

.title {
  flex: 1;
}

.media {
  flex: 0 0 50px;
}

.title {
  width: 100%;
}

.title-container,
h2,
.label,
.value {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.label {
  width: 50px;
  display: inline-block;
}

.value {
  display: inline-block;
}

h2 {
  width: 100%;
}