<div class="grid">
  <div class="grid-item">
    <h2>More accessible</h2>
    <p>Think you know a lot about cheese? Well then it’s time to put your knowledge to test with these cheese trivia questions.</p>
    <ol>
      <p>
        <li>What French cheese is considered to be the 'bluest' cheese in the world?</h>
          <ul>
            <li>Roquefort</li>
            <li>Gorgonzola</li>
            <li>Dolcelatte</li>
            <li>Saint Agur</li>
          </ul>
      </p>
      <li>What versatile Italian cheese used often on pizza and lasagna was originally made from buffalo milk?</li>
      <ul>
        <li>Mozzarella</li>
        <li>Asiago</li>
        <li>Taleggio</li>
        <li>Fontina</li>
      </ul>
      </p>
      <p>
        <li>What is a fear of cheese called?</li>
      <ul>
        <li>Mycophobia</li>
        <li>Galaphobia</li>
        <li>Fromphobia</li>
        <li>Turophobia</li>
      </ul>
      </p>
    </ol>
  </div>
  <div class="grid-item">
    <h2>Less accessible</h2>
    <p>Think you know a lot about cheese? Well then it’s time to put your knowledge to test with these cheese trivia questions.</p>
    <p>What French cheese is considered to be the 'bluest' cheese in the world - Roquefort, Gorgonzola, Dolcelatte, or Saint Agur?
    </p>
    <p>What versatile Italian cheese used often on pizza and lasagna was originally made from buffalo milk - Mozzarella, Asiago, Taleggio, or Fontina?
    </p>
    <p>What is a fear of cheese called - Mycophobia, Galaphobia, Fromphobia, or Turophobia?
    </p>
  </div>
</div>

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

body {
  font-family: "Open Sans", sans-serif;
  margin: 2rem;
}

h2 {
  font-size: 1.5rem;
}

h3 {
  font-size: 1.25rem;
}

p,
li {
  font-size: 1rem;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
}

.grid-item {
  padding: 0 1.25rem;
  margin: 1rem;
  text-align: left;
  overflow: hidden;
}