title: Aligning two elements differently in same div
body: <p>I have multiple elements in the a single div.</p>
  
  <p>I want to align one element as "text-align: right" and another element "text-align: left"</p>
  
  <p>Check the below code:</p>
  
  <pre><code>&lt;div class="image_meaning" style="display: none; background-color: white; height: 35px; margin-left: 1px;"&gt;
      &lt;input type="checkbox" id="points" value="Temporal Filter" style="text-align: left; "/&gt;
      &lt;label for="tempral_filter" style="text-align: left; "&gt;Points&lt;/label&gt;
  
      &lt;img style="text-align: right;" src="{{ STATIC_URL }}img/cross.png"/&gt;-abc
      &lt;img style="text-align: right;" src="{{ STATIC_URL }}img/blue_triangle.png"/&gt;-cde
  &lt;/div&gt;
  </code></pre>
  
  <p>but when I run the code it places both the element to the left.</p>
  
  <p>any idea how to do it?</p>