title: How do i put the label and slider on the same line
body: <p>Here is my code, this outputs the slider on one row and then the label on the row below it. When id like them next to each other on the same row.</p>
  
  <p>I've tried using the display value in both the label and the slider, but it doesn't seem to make any difference. </p>
  
  <p>Any help would be appreciated. Thx in advance.</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-js lang-js prettyprint-override"><code>var slider = document.getElementById("myRange");
  var output = document.getElementById("demo");
  output.innerHTML = slider.value;
  
  slider.oninput = function() {
    output.innerHTML = this.value;
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#slidecontainer {
    width: 70%;
  }
  
  .slider {
    -webkit-appearance: none;
    width: 100%;
    height: 25px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
  }
  
  .slider:hover {
    opacity: 1;
  }
  
  .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    background: #4CAF50;
    cursor: pointer;
  }
  
  .slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    background: #4CAF50;
    cursor: pointer;
  }
  
  input {
    display: inline-block;
  }
  
  label {
    display: inline-block;
    float: left;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h1&gt;Custom Range Slider&lt;/h1&gt;
  &lt;p&gt;Drag the slider to display the current value.&lt;/p&gt;
  
  &lt;div id="slidecontainer"&gt;
    &lt;input type="range" min="1" max="100" value="50" class="slider" id="myRange"&gt;
    &lt;label&gt;Value: &lt;span id="demo" display=inline float=left&gt;&lt;/span&gt;&lt;/label&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>