title: DIv inside my Bootstrap div will not right align (but text does)
body: <p>I am trying to align two divs, each of which are inside Bootstrap column divs. I want to align the one in the first column to the right, and the one in the second column to the left. The divs inside are positioned relative, so that content inside them can align absolutely. But even removing that positioning didn't fix my issue. I can't figure it out, because it works on teh plain text i place inside the columns/divs, just as a test, but not on the divs.</p>
  
  <p><strong>Here is my html:</strong>   </p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="leftFeature col-md-6"&gt;TESTTEXT&lt;br&gt;
        &lt;div class="blockFeature"&gt;
           [types field='square-feature-image' size='full'][/types]
           &lt;div class="blockFeatureOverlay"&gt;&lt;/div&gt;
           &lt;div class="blockFeatureText"&gt;
              &lt;h2&gt;[types field='front-page-feature-tagline'][/types]&lt;/h2&gt;
              &lt;h3&gt;[types field='tag-line'][/types]&lt;/h3&gt;
           &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="rightFeature col-md-6"&gt;TESTTEXT&lt;br&gt;
        &lt;div class="blockFeature"&gt;
           [types field='square-feature-image' size='full'][/types]
           &lt;div class="blockFeatureOverlay"&gt;&lt;/div&gt;
           &lt;div class="blockFeatureText"&gt;
              &lt;h2&gt;[types field='front-page-feature-tagline'][/types]&lt;/h2&gt;
              &lt;h3&gt;[types field='tag-line'][/types]&lt;/h3&gt;
           &lt;/div&gt;
         &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Here is my css:</strong></p>
  
  <pre><code>.leftFeature {
    background-color:#F9D069;
    text-align:center!important;
  }
  
  .rightFeature {
    background-color:#B6DEFF;
    text-align:center!important;
  }
  
  .col-sm-6 {padding:0;}
  
  .blockFeature {
    width:80%;
    background-color:#7F9FA1;
    background-size:100%;
    line-height:0;
    position:relative; /*removing this rule did not fix my issue */
  }
  
  .blockFeatureOverlay {
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background-color:rgba(0, 0, 0, 0.25);
    /*background-color:rgb(158,84,6, 0.25);*/
  }
  
  .blockFeature a {
    text-decoration:none;
  }
  
  .blockFeature img {
    width:100%;
    height:auto;
  }
  
  .blockFeatureText {
    position:absolute;
    bottom:20px;
    left:20px;
  }
  
  
  .blockFeatureText h2 {
    font-size:2.4em;
    font-weight:700;
    color:#fff;
    text-transform:uppercase;
    margin-bottom:10px!important;
    line-height:100%!important;
    text-align:left;
  }
  
  .blockFeatureText h3 {
    font-size:1.2em;
    font-weight:300;
    color:#fff;
    text-transform:uppercase;
    margin-bottom:0!important;
    line-height:100%!important;
    text-align:left;
  }
  </code></pre>
  
  <p><strong>And this is a representation of what i am getting:</strong> <a href="https://imgur.com/a/LekqV" rel="nofollow noreferrer">http://imgur.com/a/LekqV</a></p>
  
  <p><strong>but this is what i want:</strong> <a href="https://imgur.com/a/ER1kB" rel="nofollow noreferrer">http://imgur.com/a/ER1kB</a></p>
  
  <p>It's probably (hopefully) something really obvious. But after 24 hours of messing around, I cannot seem to fix it. I have tried adding text-right or pull-right class on the left hand div, but it either does something different than I need, or doesn't work at all. </p>
  
  <p>thank you for anyone who can maybe help me out?</p>
  
  <p>EDIT: Here are two fiddles i created</p>
  
  <ol>
  <li><p>forked from a fiddle where someone seemed to have already created the bootstrap environment: <a href="https://jsfiddle.net/Katrina_B/w4dt8qq7/" rel="nofollow noreferrer">https://jsfiddle.net/Katrina_B/w4dt8qq7/</a></p></li>
  <li><p>one with no bootstrap, in case the above is not correct, and someone knows better how to add bootstrap to it: <a href="https://jsfiddle.net/Katrina_B/c4kxa06s/" rel="nofollow noreferrer">https://jsfiddle.net/Katrina_B/c4kxa06s/</a></p></li>
  </ol>
  
  <p>I am completely new to Bootstrap, and rarely use Jfiddle, so apologies if i have done this incorrectly. In any case, in neither example, are the divs doing what i expect or wish them to do.</p>