<section class="layout-float">
  <style>
    .layout-float {
      min-height: 200px;
    }

    .layout-float .left,
    .layout-float .right {
      float: left;
      width: 50%;
      height: 200px;
      background-color: blue;
    }

    .layout-float .left {
      margin-left: -35px;
    }

    .layout-float .right {
      float: right;
      margin-right: -35px;
    }

    .layout-float .center {
      float: left;
      width: 70px;
      height: 200px;
      background-color: red;
    }
  </style>
  <article>
    <div class="left">left</div>
    <div class="center">center</div>
    <div class="right">right</div>
  </article>
</section>

<section class="layout-flex">
  <style>
    .layout-flex > .left-center-right {
      display: flex;
      min-height: 200px;
    }
    .layout-flex .left {
      flex: 1;
      background-color: orange;
    }
    .layout-flex .right {
      flex: 1;
      background-color: orange;
    }
    .layout-flex .center {
      width: 70px;
      background-color: blue;
    }
  </style>
  <article class="left-center-right">
    <div class="left"></div>
    <div class="center">center</div>
    <div class="right"></div>
  </article>
</section>