JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <div class="homepage-casestudy container-fluid mt-25">
        <div class="row">
            <div class="col-md-8" style="border:1px solid green;">
                <div class="container">
                    <div class="row">
                        <div class="col-sm-offset-4 col-md-6 col-md-offset-0 homepage-casestudy__text" style="border:1px solid orange;">
                            <h4>Case Study</h4>
                            <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</h3>
                            <a href="#" class="btn btn-primary btn-lg">Read</a>
                            <a href="#" class="btn btn-lg btn-default">See All</a>
                        </div>
                    </div>
                </div>   
            </div>
            
            <div class="col-md-4 hidden-sm hidden-xs" style="padding:0; border:1px solid red;">
                <img src="http://via.placeholder.com/1037x615" style="max-height: 300px" class="pull-right">
            </div>
        </div>
    </div>

CSS

// Case studies
.homepage-casestudy {
    background: #2A3180; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left, #2A3180 , #82ccf0); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, #2A3180, #82ccf0); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, #2A3180, #82ccf0); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, #2A3180, #82ccf0);
}    
    .homepage-casestudy__text {
       color: #000; 
       padding: 20px 0;
    }
    .homepage-casestudy__text h3 {
       line-height: 1.6;
    }
    @media (min-width: 992px) {
        .homepage-casestudy__text h3 {
            margin-top: 60px;
            width: 400px;
        }
    }