JSFiddle - React, Tailwind, and code Playground

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;
  display: inline-block;
  vertical-align: top;
  border: 1px solid red;
}

.PagePhotoEvent {
  display: inline-block;
  border: 1px solid green;
  max-width: 100%;
}

.PagePhotoEvent img {
  padding: 0px !important;
  max-width: 100%;
  height: auto;
}

.infoevents {
  line-height: 200% !important;
  min-width: 298px;
  display: inline-block;
  height: 100%;
  border: 1px solid blue;
  vertical-align: top;
}