Horizontal panels

by pepperdigital

HTML

<div class="parent">
  <div class="panel1" style="width: 20%;">
  </div>
  <div class="panel2" style="width: 30%;">
  </div>
    <div class="panel3" style="width: 10%;">
  </div>
      <div class="panel4" style="width: 40%;">
  </div>
</div>

<div class="parent">
  <div class="panel1" style="width: 30%;">
  </div>
  <div class="panel2" style="width: 25%;">
  </div>
    <div class="panel3" style="width: 20%;">
  </div>
      <div class="panel4" style="width: 25%;">
  </div>
</div>

CSS

.parent {
  width: 66%;
  border: 1px solid #E18728;
  float: left;
}
.panel1 {
  padding: 1em 0em 1em 0em;
  border: 1px solid black;
  float: left;
  box-sizing: border-box;
}

.panel2 {
  padding: 1em 0em 1em 0em;
  border: 1px solid black;
  float: left;
  box-sizing: border-box;
}
.panel3 {
  padding: 1em 0em 1em 0em;
  border: 1px solid black;
  float: left;
  box-sizing: border-box;
}
.panel4 {
  padding: 1em 0em 1em 0em;
  border: 1px solid black;
  float: left;
  box-sizing: border-box;
}