How to align text next to a "div" in HTML/CSS?
<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>