Make two Divs one with text and one with picture responsive using CSS in ASP.Net

Hi.

How to create two side responsive.

I try make like this: https://www.upload.ee/image/12553461/try.png

Left side is photo and text. Very Thanks.

<section class="header-hero">
	
  <div class="container">
  
    <div class="row justify-content-center" style="margin-top:10px;">
	
      <div class="col-lg-5 ">
	  
        <div class="card mx-auto">
		<div class="card-header bg-results text-white effect">
				<div class="form-group">
									<div class="results">text<br />
									text<span id="g0X" class="">-</span> text<span id="" class="">-</span><br>
									
								</div>
							</div>
				</div>
          <article class="card-body">
		
			
            <form>
			<div class="form-group">
			<label for="inputAddress">text</label>
            <input type="text" class="form-control" id="inputAddress" placeholder="text">
             </div>
              <div class="form-row">
                <div class="col form-group">
                  <label>text</label>
                  <input type="text" class="form-control" placeholder="text">
                </div>
                <!-- form-group end.// -->
                <div class="col form-group">
                  <label>text</label>
                  <input type="text" class="form-control" placeholder="text">
                </div>
                <!-- form-group end.// --> 
              </div>			
		  <div class="form-row">
			 <div class="form-group col-md-6">
                  <label>text</label>
                   <select id="inputState" class="form-control">
       	            <option label="">0.0</option>
				   
                  </select>
             </div>
                <div class="form-group col-md-6">
                  <label>text</label>
                  <input type="text" class="form-control" placeholder="text">
                </div>
                <!-- form-group end.// -->
                
                <!-- form-group end.// --> 
              </div>
              <!-- form-row end.// -->              
            <div class="form-row">
                <div class="col form-group">
                  <label>text</label>
                  <input type="text" class="form-control" placeholder="text">
                </div>
                <!-- form-group end.// -->
                <div class="col form-group">
                  <label>text</label>
                  <input type="text" class="form-control" placeholder="text">
                </div>
                <!-- form-group end.// --> 
              </div>
			<div class="form-group">
                <button type="submit" class="btn btn-primary btn-block"><i class="fa fa-calculator"></i> text</button>
              </div>
              <!-- form-group// -->
              </form>
          </article>
          <!-- card-body.// --> 
        </div>
      </div>
    </div>
  </div>
  <!-- container --> 
</section>

.bg-results {
    background-color: blue !important;
}

Here is my source: https://jsfiddle.net/alumic/8b4mojr6/1/