title: Force Elements Onto New Line
body: <p>I am trying to push a div with images underneath a couple of arrow icons, that do not take up a whole row, as seen below. However, the images underneath keep wrapping in between the arrows, which is not the desired result. I was wondering if someone can please advise how to fix this? The example I inserted only works in narrower viewports because I pulled it from my mobile site I am working on. I am confused why two separate divs are overlapping in this way. Thanks in advance.</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>#photo-viewer-outer-wrap div {
    display: inline;
  }
  
  #photo-viewer-inner-wrap-left img {
    max-width: 100%;
  }
  
  #photo-viewer-inner-wrap-right {
    display: flex;
    overflow-y: scroll;
    max-height: 300px;
    clear: both;
  }
  
  #photo-viewer-inner-wrap-right img {
    max-width: 30%;
  }
  
  #left-arrow {
    float: left;
    width: 30px;
    margin-left: 10px;
  }
  
  #right-arrow {
    float: right;
    width: 30px;
    margin-right: 10px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="photo-viewer-outer-wrap"&gt;
    &lt;div id="photo-viewer-inner-wrap-left"&gt;
      &lt;img src="https://www.russorizio.com/wp-content/uploads/2016/07/ef3-placeholder-image.jpg" /&gt;
      &lt;img src="https://www.iconpacks.net/icons/2/free-arrow-right-icon-2817-thumb.png" id="right-arrow" title="Next image" alt="next image" /&gt;
      &lt;img src="https://static.vecteezy.com/system/resources/thumbnails/000/365/868/small/Basic_Elements__28113_29.jpg" id="left-arrow" title="Previous image" alt="previous image" /&gt;
    &lt;/div&gt;
    &lt;div id="photo-viewer-inner-wrap-right"&gt;
      &lt;img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" /&gt;
      &lt;img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" /&gt;
      &lt;img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" /&gt;
      &lt;img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" /&gt;
      &lt;img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" /&gt;
      &lt;img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" /&gt;
      &lt;img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" /&gt;
      &lt;img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" /&gt;
      &lt;img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" /&gt;
      &lt;img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" /&gt;
      &lt;img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" /&gt;
      &lt;img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" /&gt;
      &lt;img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" /&gt;
      &lt;img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" /&gt;
      &lt;img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" /&gt;
      &lt;img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" /&gt;
      &lt;img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" /&gt;
      &lt;img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" /&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>