title: Jinja2 Strange template behaviour
body: <p>I am using bootstrap CSS and trying to add content in two side-by-side divs. The problem is that I'm getting all of the content put into one div, interleaved.</p>
  
  <pre class="lang-html prettyprint-override"><code>{% if pred_ext != None %}
  &lt;div class="col-md-3"&gt;
      &lt;h3&gt;Both Teams to Score&lt;/h3&gt;
      &lt;h3&gt;{{ pred_ext["BTTS"] }}&lt;/h3&gt;
      &lt;h3&gt;{{ pred_ext["noBTTS"] }}&lt;/h3&gt;
  &lt;/div&gt;
  {% endif %}
  
  {% if pred_ext != None %}
  &lt;div class="col-md-9"&gt;
      &lt;h3&gt;Both Over 2.5&lt;/h3&gt;
      &lt;h3&gt;{{ pred_ext["over25"] }}&lt;/h3&gt;
      &lt;h3&gt;{{ pred_ext["under25"] }}&lt;/h3&gt;
  &lt;/div&gt;
  {% endif %}
  </code></pre>
  
  <p>All of the content ends up in the <code>col-md-9</code> div. It looks like:</p>
  
  <pre><code>Both Teams to Score
  Both Over 2.5
  1.9
  2.0
  1.2
  3.8
  </code></pre>