<div class="controls">
  
  <label for="flexgrow1">.item-1 flex-grow:</label>
  <select id="flexgrow1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="0.5">0.5</option>
    <option value="0">0</option>
  </select>

  <label for="flexgrow2">.item-2 flex-grow:</label>
  <select id="flexgrow2">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="0.5">0.5</option>
    <option value="0">0</option>
  </select>
  
  <label for="flexgrow3">.item-3 flex-grow:</label>
  <select id="flexgrow3">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="0.5">0.5</option>
    <option value="0">0</option>
  </select>
</div>

<div class="container">
    <div class="item item-1">1</div>
    <div class="item item-2">2</div>
    <div class="item item-3">3</div>
</div>

html {
  background: #f6faff;
}

/*-- --*/
.container {
  background-color: darkslategrey;
  padding: 1rem;
  display: flex;
  flex-direction: row;
}
.item {
  flex-grow: 1;
  font-size: 2rem;
  line-height: 1;
  text-align: center;
  width: 3rem;
  padding: 2rem 1rem;
  background: #e2f0ef;
  border: 3px solid #51aaa3;
  color: #51aaa3;
  margin: 6px;
}

.controls {
  padding: 30px 6px;
  font-size: 1.2rem;
  color: #2f4f4f;
}

.controls select {
  margin-right: 20px;
  color: #2f4f4f;
}

$(document).ready(function(){
  
  $("#flexgrow1").change(function () {
      var flexgrow = $("#flexgrow1").val();
      $(".item-1").css("flex-grow",flexgrow);
  });
  
  $("#flexgrow2").change(function () {
      var flexgrow = $("#flexgrow2").val();
      $(".item-2").css("flex-grow",flexgrow);
  });
  
  $("#flexgrow3").change(function () {
      var flexgrow = $("#flexgrow3").val();
      $(".item-3").css("flex-grow",flexgrow);
  });
  
});