title: Draw one row of content for a carousel
body: <p>With the tagline JavaScript being the precluded implementing tool, I need a container that has the ability to slide sideways, without drawing down in rows. I have done multiple searches for key terms, like single row, inline, flexbox, and grid. But nothing has come up with a pure answer. So I need some help here, guys, and gals.</p>
  <p>This is what I have on it right now. It draws very discrete lines of information, each one row. I might be answering my own question here, but should I put the <code>#carousel-window</code> a <code>parentNode</code> higher?</p>
  <pre><code>#carousel-window {
      display: inline-table;
      overflow: hidden;
      overflow-x: hidden;
      white-space: nowrap;
  }
  .carousel-grid-box
  {
      width:150px;
  }
  </code></pre>
  <p>Here's my HTML:</p>
  <pre><code>&lt;table style=&quot;width:100%;height:150;background-color:silver;color:black;&quot; id=&quot;carousel-table&quot; ajax=&quot;&quot;&gt;
  &lt;tbody&gt;&lt;tr&gt;&lt;td&gt;
      &lt;img style=&quot;height:100%;width:100;position:relative;z-index:2&quot; src=&quot;' + leftScrollButtonImg + '&quot; onclick=&quot;carouselScrollLeft(this)&quot;&gt;&lt;/td&gt;
  &lt;td&gt;&lt;section id=&quot;carousel-window&quot; style=&quot;width:100%;vertical-align:super;&quot; ajax=&quot;&quot;&gt;&lt;/section&gt;&lt;/td&gt;
  &lt;td&gt;&lt;img style=&quot;height:100%;width:100;position:relative;z-index:2&quot; src=&quot;' + rightScrollButtonImg + '&quot; onclick=&quot;carouselScrollRight(this)&quot;&gt;
  &lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>