<div class="container">
 <div class="box">
   <blockquote><p>Dandelion cucumber earthnut pea peanut soko zucchini.
     </p></blockquote>
      
 <p>
   Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. 
 </p>
    </div>
  
   <div class="box grid">
   <blockquote><p>Dandelion cucumber earthnut pea peanut soko zucchini.
     </p></blockquote>
      
 <p>
   Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. 
 </p>
    </div>
</div>
* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 40px;
  font: 1.2em 'Open Sans', sans-serif;
  background-color: #fff;
}

h1, h2, h3 {
  font-family: 'Averia Serif Libre', cursive;
}

.container {
  background-color: #ddddda;
  height: 720px;
  width: 1280px;
  padding: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}

.box {
  padding: 20px;
  background-color: #fff;
  width: 550px;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

.box blockquote {
  float: left;
  margin: 0 10px 10px 0;
  width: 40%;
  font: 120% 'Averia Serif Libre', cursive;
}

.floated p {
  margin: 0;
}


Run Pen

External CSS

  1. https://fonts.googleapis.com/css?family=Averia+Serif+Libre|Open+Sans&amp;display=swap

External JavaScript

This Pen doesn't use any external JavaScript resources.