title: css label and div on the same line
body: <p>This is my html</p>
  
  <pre><code>&lt;div id="restaurantInformation"&gt;
      &lt;ul&gt;
          &lt;li&gt;
              &lt;label&gt;Logo&lt;/label&gt;
              &lt;div class="oneInfo"&gt;
                  &lt;div class="fileupload-new thumbnail" &gt;
                      &lt;img src="../img/logo_test.jpg" alt="Profile Avatar" style="width: 180px; height: 180px;"/&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;label&gt;username&lt;/label&gt;
              &lt;div class="oneInfo"&gt;
  
              &lt;/div&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is the css</p>
  
  <pre><code>#restaurantInformation{
      position: relative;
      background-color: red;
  }
  #restaurantInformation ul li{
      list-style: none;
      margin-bottom: 10px;
  }
  #restaurantInformation ul li label{
      width: 20%;
      display: block;
      float: left;
  }
  #restaurantInformation ul li .oneInfo{
      width: 60%;
      float: right;
      background-color: #066ECD;
  }
  </code></pre>
  
  <p>I tried to make the <strong>label and the div</strong> on the same line but the result is this:
  <img src="https://i.stack.imgur.com/wZnV6.png" alt="enter image description here"></p>
  
  <p>what am I missing wrong please?</p>
  
  <p>I already try to <code>float</code> <code>left</code> and <code>right</code></p>
  
  <p>and change the <code>display</code> to <code>block</code> and <code>inline-block</code> but the result is keep as the image.</p>