Play with flex wrap

by Julien Roche

HTML

<div class="main">
  <span class="main__label">My label 1:</span>
  <span class="main__value">A size of value</span>
</div>

<div class="main">
  <span class="main__label">My label 2:</span>
  <span class="main__value">25</span>
</div>

<div class="main">
  <span class="main__label">My label 3:</span>
  <span class="main__value">A size of value</span>
</div>

<div class="main">
  <span class="main__label">My label 4:</span>
  <span class="main__value">25</span>
</div>

<div class="main">
  <span class="main__label">My label 5:</span>
  <span class="main__value">A very long long size of value</span>
</div>

CSS

body {
  display: flex;
  flex-flow: row wrap;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}

.main {
  display: flex;
  flex: 1 1 auto;
  flex-direction: row;
  min-width: 300px;
}

.main__label {
  background-color: purple;
  flex: 0 0 145px;
  padding-right: 5px;
  
  overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.main__value {
  background-color: orange;
  flex: 1 1 1px;
  padding-right: 5px;
  
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}