Aligned Lists Without Tables

dl.html.ep

      <div class="panel" id="source">
        <dl class="control-list">
          <dt>Source</dt>
          <dd>
            <div class="cell"><%= $info->{uri} // '' %></div>
            <div class="cell"><a href="<%= url_for->query([eject => 1]) %>"><i class="fa fa-eject"></i></a></div>
          </dd>
          <dt>A Label That Overspills Its Meagre Allowed Space</dt>
          <dd>
            <div class="cell"><%= sprintf '%.1f', $info->{position} // 0 %></div>
            <div class="cell"><a href="<%= url_for %>"><i class="fa fa-refresh"></i></a></div>
          </dd>
          <dt>Rate</dt>
          <dd>
            <div class="cell"><%= sprintf '%.1f', ($info->{rate} // 0) / 1_000 %> kHz</div>
          </dd>
          <dt>Frequency</dt>
          <dd>
            <div class="cell"><%= sprintf '%.1f', ($info->{frequency} // 0) / 1_000 %> kHz</div>
          </dd>
          <dt>Channels</dt>
          <dd>
            <div class="cell"><%= $info->{channels} // 0 %></div>
          </dd>
        </dl>
      </div>

flex-list.css

dl.control-list {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
}
dl.control-list .cell {
  display: inline;
  margin-right: 20px;
}
dl.control-list dd {
  flex: 0 0 84%;
  margin-bottom: 12px;
  margin-left: auto;
}
dl.control-list dt {
  flex: 0 0 16%;
  margin-bottom: 12px;
}
dl.control-list dt:after {
  content: ': ';
}
.panel {
  border: 1px solid #ddd;
  margin-bottom: 4rem;
  padding: 20px 12px 8px 20px;
  max-width: 600px;
}

float-list.css

dl.control-list {
  overflow: hidden;
  margin: 0;
}
dl.control-list .cell {
  display: inline;
  margin-right: 20px;
}
dl.control-list dd,
dl.control-list dt {
  display: block;
  float: left;
  margin-bottom: 12px;
  vertical-align: top;
}
dl.control-list dd {
  width: 84%;
}
dl.control-list dd + dd:before {
  content: ' / '
}
dl.control-list dt {
  clear: left;
  width: 16%;
}
dl.control-list dt:after {
  content: ': ';
}
.panel {
  border: 1px solid #ddd;
  margin-bottom: 4rem;
  padding: 20px 12px 8px 20px;
  max-width: 600px;
}