JSFiddle - React, Tailwind, and code Playground

by mgiuffrida

HTML

<div class="list-item">
  <div>Start</div>
</div>
<div class="list-item">
  <div>Start</div>
  <div>Div</div>
</div>
<div class="list-item">
  <div>Start</div>
  <div>Middle</div>
  <div>Div</div>
</div>

<h3>Example:</h3>
<div class="list-item">
  <div>Start</div>
  <div hidden="[[maybeHidden]]">Middle</div>
  <div>Div</div>
</div>
<h3>Current reality:</h3>
<div class="list-item">
  <div class$="[[ifMaybeHiddenThenStartElseEmptyString]]">Start</div>
  <div hidden$="[[maybeHidden]]" class="middle">Middle</div>
  <div>Div</div>
</div>

CSS

.list-item {
  align-items: center;
  border: 1px solid red;
  display: flex;
  min-height: 40px;
}

.list-item > * {
  overflow: hidden;
  white-space: nowrap;
}

.list-item > *:last-child:not(:first-child) {
  flex: 1;
  text-align: end;
}

.list-item *:not(:first-child) {
  -webkit-margin-start: 12px;
}

.list-item *:not(:last-child) {
  -webkit-margin-end: 12px;
}