Flexbox Controls

HTML

<h1>Controls</h1>
<div class="controls">
  <div class="row">
    <div class="icon">O</div>
    <div class="name">Short</div>
    <div class="control">
      <input type="range" />
    </div>
  </div>
  <div class="row">
    <div class="icon">O</div>
    <div class="name">Long label with short control</div>
    <div class="control">
      <input type="checkbox"/>
    </div>
  </div>
  <div class="row">
    <div class="icon">O</div>
    <div class="name">Long label with long control</div>
    <div class="control">
      <input type="range" />
    </div>
  </div>
</div>

CSS

body {
  background-color: black;
  color: white;
  font: 14px Helvetica, Arial;
}

.controls {
  width: 50%;
  border: solid 1px;
  display: flex;
  flex-direction: column;
}

.row {
  display: flex;
  align-items: stretch;
}

.row:nth-child(odd) {
  background-color: rgba(255, 255, 255, 0.1);
}

.row > * {
  padding: 5px;
}

.icon {
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.name {
  background-color: rgba(255, 255, 255, 0.5);
  
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.control {
  display: flex;
  justify-content: end;
  flex-grow: 1;
}