JSFiddle - React, Tailwind, and code Playground

by Salmin Skenderovic

HTML

<div class="d-flex">

  <div class="f-1">left</div>

  <div class="d-flex flex-col f-1">

    <div class="d-flex">
      <div class="mat-radio-button f-1">
        <label class="no-wrap f-1">
          <input type="radio" />
          <span class="mat-radio-label-content">
            Block
          </span>
        </label>
      </div>
      <div class="d-flex button f-1">
        <div class="truncate">+ Assign End user notification</div>
        <div class="f-1">X</div>
      </div>
    </div>


    <div class="d-flex">
      <div class="mat-radio-button f-1">
        <label class="no-wrap f-1">
          <input type="radio" />
          <span class="mat-radio-label-content">
            Prompt
          </span>
        </label>
      </div>
      <div class="d-flex button f-1">
        <div class="truncate">+ Assign End user notification</div>
        <div class="f-1">X</div>
      </div>
    </div>


  </div>

</div>

SCSS

.d-flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.f-1 {
  flex: 1;
}

.f-0 {
  flex: 0;
}

.button {
  background: lightgray;
  border: 1px solid blue;
}

.truncate {
  text-overflow: ellipsis;
}

.no-wrap {
  flex-wrap: nowrap;
}