title: Overlap two div in Bootstrap
body: <p>I saw many Q/A in Stackoverflow but not getting solution!!</p>
  
  <p><a href="https://i.stack.imgur.com/j42by.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/j42by.png" alt="enter image description here"></a></p>
  
  <p>Above image is my desired design.Total white space is a <code>container</code> of Bootstrap. And two div will contain in it with full width of the <code>container</code>. Their width are not matter like <code>col-md-7</code> and <code>col-md-5</code> and anything.</p>
  
  <p>I have tried some:</p>
  
  <pre><code>&lt;div class="container"&gt;
  
       &lt;div class="row"&gt;
            &lt;div class="col-md-6"&gt;
                 &lt;div class="FirstDIV"&gt;
                      abcd
                  &lt;/div&gt;
            &lt;/div&gt;
  
            &lt;div class="col-md-6 overlay-text"&gt;
                &lt;img src="#" height="auto" class="w-100"/&gt;
                &lt;button&gt;Abc&lt;/button&gt;
            &lt;/div&gt;
  
       &lt;/div&gt;
  &lt;/div&gt;
  .overlay-text {
    align-self: flex-start;
    padding:20px;
    margin-top: 5%;
  }
  
  .FirstDIV {
    background-color: #FDC9B3;
    transform: translateX(15%); 
    height: 200px;
  }
  </code></pre>
  
  <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>.overlay-text {
    align-self: flex-start;
    padding:20px;
    margin-top: 5%;
  }
  
  .FirstDIV {
    background-color: #FDC9B3;
    transform: translateX(15%); 
    height: 200px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/&gt;
  
  &lt;div class="container"&gt;
  
       &lt;div class="row"&gt;
            &lt;div class="col-md-6"&gt;
                 &lt;div class="FirstDIV"&gt;
                      abcd
                  &lt;/div&gt;
            &lt;/div&gt;
  
            &lt;div class="col-md-6 overlay-text"&gt;
                &lt;img src="https://d1v3slut4s2mfy.cloudfront.net/4febbf2819ab561801f175b47cf75b3413985518/assets/images/quote-video-placeholder.jpg" height="auto" class="w-100"/&gt;
                &lt;button&gt;Abc&lt;/button&gt;
            &lt;/div&gt;
  
       &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://jsfiddle.net/n8cj4o3d/" rel="nofollow noreferrer">https://jsfiddle.net/n8cj4o3d/</a></p>
  
  <p><strong>Mainly <code>transform: translateX(15%);</code> is creating problem.</strong></p>