<div class="container">
      <div class="column-1 box">
        <h1>What is Lorem Ipsum?</h1>
        <p>
          What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing
          and typesetting industry. Lorem Ipsum has been the industry's standard
          dummy text ever since the 1500s, when an unknown printer took a galley
          of type and scrambled it to make a type specimen book. It has survived
          not only five centuries, but also the leap into electronic
          typesetting, remaining essentially unchanged
        </p>
      </div>
      <div class="column-2 box">
        <h1>What is Lorem Ipsum?</h1>
        <p>
          What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing
          and typesetting industry. Lorem Ipsum has been the industry's standard
          dummy text ever since the 1500s, when an unknown printer took a galley
          of type and scrambled it to make a type specimen book. It has survived
          not only five centuries, but also the leap into electronic
          typesetting, remaining essentially unchanged
        </p>
      </div>
    </div>
:root {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 1rem;
  max-width: 1200px;
  margin: 30px auto;
}

h1 {
  font-family: cursive;
}

.container {
  display: flex;
  width: 100%;
}

.column-1 {
  flex-shrink: 0; /* shrinks to 0 to apply 70% width*/
  flex-basis: 70%; /* sets initial width to 70%*/
}

.box {
  background-color: rgb(245, 215, 160);
  padding: 10px;
  border-radius: 12px;
  border: 2px solid rgb(116, 113, 113);
  margin: 1rem;
  box-shadow: 1px 1px 1px #000;
}

@media only screen and (max-width: 900px) {
  .container {
    flex-direction: column;
  }

  .box {
    margin: 0 0 1rem;
  }
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.