title: CSS Adding column in pricing table
body: <p>Hi have this following codes taken from 
  <a href="https://www.w3schools.com/howto/howto_css_pricing_table.asp" rel="nofollow noreferrer">W3schools.com</a> customized it for blogger blog post.</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>&lt;style&gt;
  /*----------Price Box--------------*/
  
  .pricecolumns {
      float: left;
      width: 33.3%;
      padding: 8px;
  }
  
  .price {
      list-style-type: none;
      border: 1px solid #eee;
      margin: 0;
      padding: 0;
      -webkit-transition: 0.3s;
      transition: 0.3s;
  }
  
  .price:hover {
      box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
  }
  
  .price .priceheader {
      background-color: #2CB8DA;
      color: white;
      font-size: 25px;
  }
  
  .price li {
      border-bottom: 1px solid #eee;
      padding: 20px;
      text-align: center;
  }
  
  .price .grey {
      background-color: #FFFFEF;
      font-size: 20px;
  }
  
  .pricebutton {
      background-color: #FBA614;
      border: none;
      color: white;
      padding: 10px 25px;
      text-align: center;
      text-decoration: none;
      font-size: 18px;
  }
  &lt;/style&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
  &lt;div class="pricecolumns"&gt;
    &lt;ul class="price"&gt;
      &lt;li class="priceheader"&gt;Rent&lt;/li&gt;
      &lt;li class="grey"&gt;$ 18.99 / Month&lt;/li&gt;
      &lt;li&gt;Test The Product on Live Market&lt;/li&gt;
      &lt;li class="grey"&gt;&lt;a href="#" class="pricebutton"&gt;Rent&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;div class="pricecolumns"&gt;
    &lt;ul class="price"&gt;
      &lt;li class="priceheader" style="background-color:#4CAF50"&gt;Buy&lt;/li&gt;
      &lt;li class="grey"&gt;$ 27.99 Life Time&lt;/li&gt;
      &lt;li&gt;Buy Forever License&lt;/li&gt;
      &lt;li class="grey"&gt;&lt;a href="#" class="pricebutton"&gt;Buy Now!&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But the problem is. the blocks are showing one after another. Not like with 2 columns as it shown in the website.</p>
  
  <p>I couldn't add following code (As the tutorial suggested) because of this code it making blogger drop down menu look weird.</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>* {
      box-sizing: border-box;
  }</code></pre>
  </div>
  </div>
  </p>