two column, one flex

by Oleh Kotsubko

HTML

<div class="wrapper d-flex">
  <div class="left"><h2>Left</h2></div>
  <div class="middle">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo quia consectetur nostrum ut voluptatum. Magni aspernatur quibusdam illo, corporis vel deserunt quidem, accusamus, itaque assumenda sunt animi dolorem officiis sint.
  <p> <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius rerum aperiam, quaerat, laudantium culpa similique, corporis veniam id eaque accusantium reiciendis quae. Voluptas rem autem id vero vel, quibusdam nemo?</span>
  <span>Necessitatibus debitis amet sed et repellat labore laboriosam repudiandae hic iste sapiente ea eveniet, laudantium, porro, magnam quasi facilis. Omnis eum expedita incidunt aut odio modi sit, nihil, commodi aperiam.</span>
  <span>Nisi sapiente, quos error aperiam modi consequatur eveniet libero voluptatum fugiat laborum ducimus nulla adipisci quis, eius dicta illo quisquam, voluptates ad. Deserunt et incidunt quam quasi quia repudiandae, laborum.</span>
  <span>Nam reiciendis aspernatur et, dolores, eaque saepe facere debitis odio, labore quisquam rem veniam obcaecati accusamus incidunt. Labore, illum. Provident delectus culpa accusantium modi recusandae iusto magnam ratione distinctio amet.</span>
  <span>Sequi illum quaerat sapiente maxime ex officiis repudiandae debitis voluptatum at. Blanditiis labore tempore illo consequatur harum accusamus earum itaque doloribus ex. Repudiandae, maiores deleniti dignissimos architecto nihil voluptatem est?</span>
  <span>Quisquam rem pariatur dolores itaque dolorum. Vero porro sed ipsam. Odit, omnis, a excepturi, repellendus cum quam tempora at explicabo culpa cupiditate eius! Praesentium, ipsum error ex soluta repudiandae enim.</span>
  <span>Sit obcaecati pariatur enim amet provident eveniet iure esse deleniti maiores harum rem ipsum incidunt, voluptatem praesentium soluta inventore, qui nam ipsam at doloremque. Provident modi, laborum id non nobis.</span>
  <span>Odit,...

CSS

body {
  margin: 0;
  padding: 0;
  color: #fff;
	background: gray;
}

* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.d-flex {
  display: flex;
}

.left, .right, .middle {
  padding: 10px;
  border: 1px solid #fff;
}

.left {
  flex: 0 0 200px;
}

.right {
  flex: 0 0 250px;
}