JSFiddle - React, Tailwind, and code Playground

HTML

<div id="book_container" class="container" style="border: 1px solid red;">

  <div class="row">
    <div class="col-xs-5" style="border: 1px solid green;">
      <div id="leftInside">
        <div class="overlayImageDiv">
          <div id="left_pagenumber"></div>
          <div id="leftNextPage" data-current-left-page>Previous PAGE</div>
          <div id="leftImageData">Here is the image name</div>
          <div id="PreviousPage2" style="background-color:blue; z-index:1">Previous page</div>
        </div>
      </div>
    </div>
    <div id="coilIMG" class="col-xs-1" style="border: 1px solid blue;" id="coil">
      <!--<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f3/2006-02-04_Metal_spiral.jpg/304px-2006-02-04_Metal_spiral.jpg" />-->
    </div>
    <div class="col-xs-5" style="border: 1px solid black;">
      <div id="rightInside">
        <div class="overlayImageDiv">
          <div id="right_pagenumber">
            <div id="rightNextPage" data-current-right-page>NEXT PAGE</div>
            <div id="rightImageData">Here is the image name</div>
            <div id="NextPage">Click Next</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row text-center">
    <div class="col-xs-12">Footer</div>
  </div>
</div>

CSS

.row{height:60px;} /* Cannot set #coilIMG to height:100% unless parent has a height */
#coilIMG{height:100%;background:url(http://tinyurl.com/hmwm7eb)center center;background-position:contain;}