HTML & CSS Side title with 3 column of images - can't figure out best way to code to make even and responsive

[dooleya]

Hi all, I am a newbie front end coder (still learning so don't judge the mess my code probably is) but if you want a challenge and can help me out.... I am trying to create this lay out:

Designed Original Layout but am only able to get to this Coded version


I have included my code and CSS so any help would be appreciated

[CODE title="HTML for block"]<div class="container-fluid">
<div class="row impact">
<div class="col-lg-1 col-md-2 col-sm-12"><img src="images/IMPACT.png" class="imgtitle"></div>
<div class="col-lg-3.3 col-md-3 col-sm-12"><img src="images/stat1.png" class="imgstat"></div>
<div class="col-lg-3.3 col-md-3 col-sm-12"><img src="images/stat2.png" class="imgstat"></div>
<div class="col-lg-3.3 col-md-3 col-sm-12"><img src="images/stat3.png" class="imgstat"></div>
<div class="col-lg-0 col-md-1 col-sm-1"></div>
</div>
</div>

[/CODE]

[CODE lang="css" title="CSS for block"].container-fluid {
background-color: white;
padding-bottom: 30px;
margin: 0 auto;
}

.row.impact {
padding-top: 20px;
margin-right: 0px;
}

.col {
align-content: center;
float: right;

}

.imgstat {
width: 100%;
align-content: center;
float: right;

}

.imgtitle {
width: 20px;
display: inline;
float: inline-start;
}[/CODE]