title: Bootstrap inline-block display
body: <p>I have a task to build a website using only HTML and BOOTSTRAP but I am getting some problems with side navigation bar (code is attached below). Why the result of my code is not displayed as two inline blocks but blocks are displayed one after another. I use bootstrap predefined class &quot;d-inline-block&quot; but it works only if a paragraph in a second div element is shorter than one line. I want to make two blocks one left, like a navigation block, and one right with some information on the right side.</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-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;&lt;/title&gt;
          &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"&gt;
          &lt;meta charset="UTF-8"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="container"&gt;
              &lt;div class="d-inline-block"&gt;
                  &lt;ul class="list-group"&gt;
                      &lt;li class="list-group-item"&gt;one&lt;/li&gt;
                      &lt;li class="list-group-item"&gt;two&lt;/li&gt;
                      &lt;li class="list-group-item"&gt;three&lt;/li&gt;
                      &lt;li class="list-group-item"&gt;four&lt;/li&gt;
                      &lt;li class="list-group-item"&gt;five&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
              &lt;div class="d-inline-block"&gt;
                  &lt;h1&gt;Lorem Ipsum&lt;/h1&gt;
                  &lt;p&gt; Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the 
   industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Please, point me to my mistake or advice what should be added to code.</p>
  <p>(The task is to use only HTML and BOOTSTRAP (I can't add my own CSS code. I can use only predefined BOOTSTRAP classes))</p>