How do I make a blade layout
<p>I want to make an application layout using "blades" as follows:</p>

<p>Blade height will always be 100VH.</p>

<p>Blade width will be variable.</p>

<p>Blades will be added and removed with js, starting with one, then adding one after another. After width runs out, the left side should scroll off-screen.</p>

<p>An example of this is the current Azure Portal. Each time you click an item, a new blade appears with more specific data about that item.</p>

<p>But I am not sure how to get started with this.  The closest I can think of is using bootstrap grid system, but the width will not necessary match the grid system used there. I don't even know if "blades" is the correct term, but that is what is used by the Azure team.</p>

<pre><code>&lt;div style="height: 100vh; background: greenyellow; width: 200px"&gt;&lt;/div&gt;
&lt;div style="height: 100vh; background: pink; width: 200px"&gt;&lt;/div&gt;
</code></pre>

<p>The above should be side by side, with greenyellow on the left, and pink to the right of it. Instead of greenyellow above the pink.</p>

<p>Here is a screenshot of the Azure Portal. It has 3 "blades"</p>

<p><a href="https://i.stack.imgur.com/yCseI.png" rel="nofollow"><img src="https://i.stack.imgur.com/yCseI.png" alt="Azure Portal"></a></p>