title: Positioning elements with CSS
body: <p>I know it is dumb question, but i am struggling with following problem
  <a href="https://i.stack.imgur.com/2Upqj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2Upqj.png" alt="enter image description here"></a></p>
  
  <p>It is one of my menu buttons. I want <code>div</code> the represents icon (marked red with circle) be on the left side of the button and the text on the right (name (blue) above description (purple)). By the way, i am going to have plenty of those buttons and i want them appear in column (block). </p>
  
  <p>My current problem is that icon <code>div</code> (red) and text <code>div</code> (green dashed) wont place inline.
  My HTML is:</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;style&gt;
      .HomeMenuNavbarButton {
          text-decoration: none;
          color : black;
          border-style:outset;
          border-width:4px;
          border-radius:15px;
          display:block;
          padding:4px;
      }
      .circle {
          width: 50px;
          height: 50px;
          -webkit-border-radius: 25px;
          -moz-border-radius: 25px;
          border-radius: 25px;
          border-color: black;
          border-style: dashed;
          display: inline-block;
          vertical-align: top;
      }
      &lt;/style&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              @foreach (var node in Model.Nodes)
              {
                  if (!(node.IsRootNode) &amp;&amp; node.Children.Any())
                  {
                      &lt;div class="col-md-4"&gt;
                      &lt;button type="button" style="display:inline;" class="btn btn-info" data-toggle="collapse" data-target="@("#relatedNavList" + node.Title) "&gt;@node.Title&lt;/button&gt;
                      &lt;div id="@("relatedNavList" + node.Title)" class="collapse"&gt;
                              @foreach (var child in node.Children)
                              {
                                  &lt;div class="HomeMenuNavbarButton" style="display:block;"&gt;
                                      &lt;div style="background-color:red;display:inline"&gt;
                                          &lt;div class="circle"&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                                      &lt;div style="border-color: green; border-style: dashed; display:inline-block"&gt;
                                          &lt;div style="background-color:blue"&gt;@(child.Title)&lt;/div&gt;
                                          &lt;div style="background-color:purple"&gt;@(child.Description)&lt;/div&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              }
                      &lt;/div&gt;
                  &lt;/div&gt;
              }
          }
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>