title: CSS Adjusting Element Widths (Having trouble)
body: <p>I'm trying to create a simple calculator and am having trouble formatting the different element boxes. I basically just need to have the items in the left column (serving, first food, second food) be in the left part of the middle of the page, and the comparison be on the right part of the middle of the page. I'm trying to adjust the margins, but it keeps messing with my elements. I'm relatively new to this, so I'm not sure if I'm doing something wrong.</p>
  
  <p>My code:</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>  .side {
    margin: 30%;
    border: 3px solid #73AD21; 
    position: relative;
    width: 33%;  
  }
  .sideone {
    margin: 20%;
    border: 3px solid #73AD21;
    position:relative;
    width: 33%;
  }
  .comparison {
    position:relative;
    margin-left: 30%;
  }
  .outer {
    display: flex;
  }
  .color-red{
  color:red;
  background:transparent}
  .color-green{
  color:green;
  background:transparent}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;head&gt;
    &lt;meta name="viewport" content="width=10px, initial-scale=1.0"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
    &lt;label&gt;
      Servings:
      &lt;input type="number" id="numberOfStocks" value="1" min="0" /&gt;
    &lt;/label&gt;
  &lt;div class="outer"&gt;
    &lt;div&gt;
      &lt;div class="side"&gt;
        &lt;h2&gt;First Item&lt;span class="servingUnit"&gt;&lt;/span&gt;:&lt;/h2&gt;
        &lt;select class="selectStock"&gt;
          &lt;option value="-1"&gt;Pick a food!&lt;/option&gt;
        &lt;/select&gt;
        &lt;br&gt;
        &lt;br&gt;
      &lt;/div&gt;
      &lt;div class="sideone"&gt;
        &lt;h2&gt;Second Item&lt;span class="servingUnit"&gt;&lt;/span&gt;:&lt;/h2&gt;
        &lt;select class="selectStock"&gt;
          &lt;option value="-1"&gt;Pick a food!&lt;/option&gt;
        &lt;/select&gt;
        &lt;br&gt;
        &lt;br&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="comparison"&gt;
      &lt;h2&gt;Comparison:&lt;/h2&gt;
      &lt;br&gt;
      &lt;br&gt;
      &lt;div class="result"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
    
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Actual functionality isn't working on the snippet, but it's not really relevant to the question. Thanks for the help!</p>