How to have responsive text and divs side by side

HTML

<div class="container">
  <h2>Heading 1</h2>
  <div>Content of div 1</div>
  <div>Content of div 2</div>
  <div>Content of div 3</div>
  <h2>Heading 2</h2>
  <div>Content of div 4</div>
  <div>Content of div 5</div>
  <div>Content of div 6</div>
  <h2>Heading 3</h2>
  <div>Content of div 7</div>
  <div>Content of div 8</div>
  <div>Content of div 9</div>
  <h2>Heading 4</h2>
  <div>Content of div 10</div>
  <div>Content of div 11</div>
  <div>Content of div 12</div>
  <h2>Heading 5</h2>
  <div>Content of div 13</div>
  <div>Content of div 14</div>
  <div>Content of div 15</div>
  <h2>Heading 6</h2>
  <div>Content of div 16</div>
  <div>Content of div 17</div>
  <div>Content of div 18</div>
  </div>

CSS

.container {
  
}
.container h2,
.container div {
  margin: 0;
  padding: 0;
  font-size: 14px;
  display: inline-block;
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid red;
  width: 20%;
}

.container h2 {
  width: 40%;
}