JSFiddle - React, Tailwind, and code Playground

by cannap

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<div class="full-width">
  <div class="container not-relative">
    <div class="row">
      <div class="col-md-6 image">
        <img src="http://loremflickr.com/820/240/paris,girl/all" alt="">

      </div>
      <div class="col-md-6 text offset-md-6">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam ipsum, maiores sed dolor doloremque sit veritatis. Labore maiores possimus odio, porro deserunt cupiditate ducimus quasi atque nisi amet id reprehenderit.
        </p>
      </div>
    </div>
  </div>
</div>
<br>
<br>
<div class="full-width">
  <div class="container not-relative">
    <div class="row">
      <div class="col-md-6 image">
        <img src="http://loremflickr.com/820/240/paris,girl/all" alt="">

      </div>
      <div class="col-md-6 text offset-md-6">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam ipsum, maiores sed dolor doloremque sit veritatis. Labore maiores possimus odio, porro deserunt cupiditate ducimus quasi atque nisi amet id reprehenderit.
        </p>
      </div>
    </div>
  </div>
</div>

CSS

* {
  padding: 0;
  margin: 0;
}

.full-width {
  position: relative;
}

.image {
  left: 0;
  position: absolute;
  padding-left:0;
}

.not-relative {
  position: static;
}

img {
  display: block;
  max-width: 100%;
}