title: How to move text next to each other using css?
body: <p>Just a simple css question. Trying to move the price next to the &quot;Quick Shop&quot; text. Basically trying to mirror this design:</p>
  <p><a href="https://i.stack.imgur.com/h4Ev3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/h4Ev3.png" alt="enter image description here" /></a></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-css lang-css prettyprint-override"><code>  .quick_shop_container{
        width:100%;
      }
      
      .quick_shop{
        background-color:white;
        display:inline-block;
      }
      
      
      .quick_shop_text{
        float:left;
      }
      .product-item-price{
        float:left;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="quick_shop_container" data-price-wrapper=""&gt;
                &lt;button class="quick_shop"&gt;
                  &lt;span class="quick_shop_text"&gt;Quick Shop&lt;/span&gt;
                  &lt;div data-price-wrapper=""&gt;
                    &lt;div class="product-item-price price" data-product-price=""&gt;| £51.95&lt;/div&gt;
                  &lt;/div&gt;
                &lt;/button&gt; 
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>How do I move it?</p>