JSFiddle - React, Tailwind, and code Playground

by Polina Emelyanova

HTML

<div class="pagePhotoFields">
  <div class="PagePhotoEvent">
    <img src="https://www.arklowbay.com/cmsListings/20235/59564c2a4ea0e.jpg" alt="" />
  </div>

  <div class="infoevents">
    <strong>Date:</strong> 28 January 2018 - 15 April 2018<br />
  </div>

</div>

CSS

.pagePhotoFields {
  height: 100%;
  width: 100%;
  max-height: 286px;
  background-color: #f1f1f1;
  border-bottom: solid 5px #bdbdbd;
  border-top: solid 5px #bdbdbd;
  margin-bottom: 30px;
  border: 1px solid red;
  overflow: hidden;
}

.PagePhotoEvent {
  float:left;
  position: relative;
  width: calc(100% - 320px);
  border: 1px solid green;
}

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

.infoevents {
  float: right;
  line-height: 200% !important;
  width: 300px;
  height: 100%;
  border: 1px solid blue;
  vertical-align: top;
}