title: How to place images side by side within a fixed width div
body: <pre><code>&lt;div id="attachments"&gt;
              &lt;div class="attachment"&gt;
                  &lt;img class="item" src="https://via.placeholder.com/150/0000FF/808080 ?Text=Digital.com" alt=""&gt;
              &lt;/div&gt;
              &lt;div class="attachment"&gt;
                  &lt;img class="item" src="https://via.placeholder.com/150/FF0000/FFFFFF?Text=Down.com" alt=""&gt;
              &lt;/div&gt;
              &lt;div class="attachment"&gt;
                  &lt;img class="item" src="https://via.placeholder.com/150/FFFF00/000000?Text=WebsiteBuilders.com" alt=""&gt;
              &lt;/div&gt;
              &lt;div class="attachment"&gt;
                  &lt;img class="item" src="https://via.placeholder.com/150/000000/FFFFFF/?text=IPaddress.net" alt=""&gt;
              &lt;/div&gt;
              &lt;div class="attachment"&gt;
                  &lt;img class="item" src="https://via.placeholder.com/150/008000/FFFFFF/?text=Green.com" alt=""&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>Want to place those image side by side. Here:
  1. #attachments -> is max width 290px &amp; height 100px (so there should be a horizontal scrollbar)</p>
  
  <ul>
  <li>don't want to use <code>float</code></li>
  </ul>