title: How can I place multiple spans in the same line?
body: <p>I'm trying to achieve this UI here.</p>
  <p><img src="https://i.stack.imgur.com/Jgfvm.png" alt="enter image description here" /></p>
  <p>So I created <strong>4</strong> spans set them to <strong>float left</strong> and <strong>display inline block</strong>. Nothing seem to work !</p>
  <hr />
  <h1>CSS</h1>
  <pre><code>&lt;style type=&quot;text/css&quot;&gt;
  
  
   .panel {
    border-radius: 0px !important;
    background-color: #4D8FCB;
    color: white;
    margin-left: 25px;
    margin-right: 25px;
  
  }
  
  .panel-heading {
    height: 114px;
  
  }
  
  .panel-body {
    font-size: 10px;
    background-color: white;
  }
  
  .sa-h1 {
    color: white;
    font-size: 39px;
    font-weight: bold;
    font-style: normal;
    font-family: &quot;adelle-sans&quot;, sans-serif;
  }
  
  .sa-h2{
    font-size: 28px;
  }
  
  .sa-h3{
    font-size: 16px;
  }
  .sa-h4{
    font-size: 14px;
  }
  
  .sa-h5{
    font-size: 12px;
  }
  
  .sa-h6{
    font-size: 10px;
  }
  
  
  .sa-right-items{
    padding: 5px 20px;
    float: left;
  }
  
  .sa-answer, .sa-score, .sa-review, .sa-report {
    vertical-align: middle;
    display: inline;
  }
  
  
  &lt;/style&gt;
  </code></pre>
  <hr />
  <h1>HTML</h1>
  <pre><code>&lt;div class=&quot;row student-accordion &quot;&gt;
    &lt;div class=&quot;col-md-12&quot;&gt;
      &lt;div class=&quot;panel-group&quot; id=&quot;accordion&quot;&gt;
        &lt;div class=&quot;panel&quot;&gt;
          &lt;div class=&quot;row panel-heading&quot;&gt;
            &lt;div class=&quot;panel-title&quot;&gt;
  
             &lt;div class=&quot;col-xs-1 sa-section&quot; style=&quot;border-right: 2px solid #c9cacb;&quot;&gt;
  
              &lt;p&gt;&lt;span class=&quot;sa-h5&quot;&gt;SECTION&lt;/span&gt;
                &lt;br&gt;
                &lt;span id=&quot;sa-section-num&quot; class=&quot;sa-h1&quot;&gt;2.2&lt;/span&gt;
                &lt;br&gt;&lt;span class=&quot;sa-h5&quot;&gt;EXERCISE&lt;/span&gt;
              &lt;/p&gt;
            &lt;/div&gt;
  
            &lt;div class=&quot;col-xs-6 col-lg-6&quot;&gt;
              &lt;span class=&quot;sa-h3&quot;&gt;Section Exercise 2.2&lt;/span&gt;&lt;br&gt;
              &lt;span class=&quot;sa-h5&quot;&gt;ALGEBRA 1&lt;/span&gt; &lt;br&gt;
              &lt;span class=&quot;sa-h4&quot;&gt;02/09/2015&lt;/span&gt;
  
            &lt;/div&gt;
  
            &lt;div class=&quot;sa-right-items&quot;&gt;
             &lt;span class=&quot;sa-answer&quot;&gt;
              &lt;span&gt; 11/25 &lt;br&gt; &lt;span class=&quot;sa-h6&quot;&gt;ITEMS ANSWERED &lt;br&gt; CORRECTLY&lt;/span&gt; &lt;/span&gt;
            &lt;/span&gt;
  
            &lt;span class=&quot;sa-score&quot;&gt;
             &lt;span&gt; 44% &lt;br&gt; &lt;span class=&quot;sa-h6&quot;&gt;SCORE&lt;/span&gt; &lt;/span&gt;
           &lt;/span&gt;
  
           &lt;span class=&quot;sa-review&quot;&gt;
            &lt;img width=&quot;40px&quot; src=&quot;/BIM/resources/images/icons-report/review_white.png&quot;&gt;&lt;br&gt;
            &lt;span&gt; &lt;span class=&quot;sa-h6&quot;&gt;REVIEW&lt;/span&gt; &lt;/span&gt;
          &lt;/span&gt;
  
  
          &lt;span class=&quot;sa-report&quot;&gt;
            &lt;span  data-toggle=&quot;collapse&quot; data-parent=&quot;#accordion&quot; href=&quot;#student-accordion-collapse&quot;  class=&quot;pull-right&quot;&gt;
              &lt;img width=&quot;40px&quot; src=&quot;/BIM/resources/images/icons-report/report_white.png&quot;&gt;&lt;br&gt;
              &lt;span&gt; &lt;span class=&quot;sa-h6&quot;&gt;VIEW REPORT&lt;/span&gt; &lt;/span&gt;
            &lt;/span&gt;
          &lt;/span&gt;
  
        &lt;/div&gt;
  
      &lt;/div&gt;
  
  
    &lt;/div&gt;
    &lt;div id=&quot;student-accordion-collapse&quot; class=&quot;panel-collapse collapse&quot;&gt;
      &lt;div class=&quot;panel-body&quot;&gt;
  
       Contents
  
     &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <hr />
  <h1>Result</h1>
  <p><img src="https://i.stack.imgur.com/CIFyY.png" alt="enter image description here" /></p>
  <p>They're stack horribly on top of each others.</p>
  <p>How do I stop that and achieve what I want ?</p>
  <p>Any hints / suggestions will be much appreciated !</p>
  <hr />
  <h1><a href="https://jsfiddle.net/bheng/onms9kcu/" rel="nofollow noreferrer">Here is my Fiddle</a> - if you need it.</h1>