JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
    <div class="floatleft">
    <div class="JShover">
    <h3 class="border">Works with your business applications
    <p >Connect with Office 365, GSuite.</p></h3>
    </div>
    <div class="JShover">
    <h3 class="border">Works with your business applications
    <p>Connect with Office 365, GSuite.</p></h3></div>
    </div>
    <div class="floatright" >
    <img class="integration" src="integrations-image.png" width="100%" height="100px">
    </div>
    <div style="clear: both;">
</div>
</div>

CSS

.border{
  border-left:6px solid #3793EE;
  text-align: left;
  padding-left: 5%;
  }
div.JShover{
    height:50%;
    text-align: left;
    opacity: 0.5;
}
.wrap {
    overflow: hidden;
    margin: auto;
    max-width: 700px;
}
.floatleft {
    float:left; 
    width: 50%;
    height: 500px;
}

.floatright {
    float: right;
    height: 500px;
    width: 50%;
}

JavaScript

$(".JShover").click(function(){
		this.style.opacity = 1 
});