title: How to align text next to a "div" in HTML/CSS?
body: <p>I have put an image map to my website with multiple colours, so I wanted to make a "div" block and next to it an explanation of what that colour represents on the map. But, when I try to do it, the text just goes under the "div", like so:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#dark_green {height: 40px;
  width: 80px;
  background-color: #009933; }
  
  #light_green {height: 40px;
  width: 80px;
  background-color: #00ff00;
   }
  
  #dark_red {height: 40px;
  width: 80px;
  background-color: #ff0000;
   }
  
  #light_orange {height: 40px;
  width: 80px;
  background-color: #ff8c1a;
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="dark_green"&gt;&lt;/div&gt; - Dark Green
  &lt;br&gt;
  &lt;div id="light_green"&gt;&lt;/div&gt; - Light Green
  &lt;br&gt;
  &lt;div id="dark_red"&gt;&lt;/div&gt; - Dark Red
  &lt;br&gt;
  &lt;div id="light_orange"&gt;&lt;/div&gt; - Light Orange</code></pre>
  </div>
  </div>
  </p>
  
  <p>How can I make the text align next to each of the "divs"?</p>