3 row div or table with different style for each row ( text and image) - html

Question

I have been stuck on this for about a day and can't seem to figure out the best way to handle this.
I am trying to put 3 elements inline inside of a dive on multiple rows.
a bold heading, a regular text element and a small icon, that need to have spacing between each and stacked 5 times.
Here is my code, it's scaling differently in jfiddle than on my html document. but i believe the general idea is clear.
In my mind I want to add padding to each element but I'm not sure how to pull this off.
I have included annotations for each class in my css
/* Typography */
h5 {
font-family: 'proxima_nova_rgbold', sans-serif;
font-size: 16px;
line-height: 20px;
font-weight: bold;
padding: 40px 0 20px 40px;
}
h3 {
font-family: 'proxima_nova_rgbold', sans-serif;
font-size: 16px;
line-height: 20px;
font-weight: bold;
padding: 40px 0 0 40px;
}
p {
font-size: 16px;
line-height: 20px;
text-align: left;
font-family: 'proxima_nova_rgregular', sans-serif;
}
/* Main Wrapper For Everything*/
.weatherwrapper {
height: 1000px;
}
/* Container Housing Both Main Weather Divs*/
.weathercontainer {
margin: 0 auto;
height: 888px;
width: 1046px;
}
/*Left Yellow Div */
.currentweather {
height: 444px;
width: 621px;
float: left;
border-radius: 10px;
background: linear-gradient(134.68deg, #FDDA14 0%, #FDC814 100%);
box-shadow: 0 2px 6px 0 rgba(0,0,0,0.2);
}
/* Current Weather Details */
.currentdetails {
width: 415px;
height: 115px;
align: center;
}
/* Hourly box */
.weathercontent {
height: 142px;
width: 541px;
margin-left: 40px;
border: 1px solid #ECECEC;
border-radius: 10px;
background-color: #FFFFFF;
}
/* Right Grey Div */
.forecast {
height: 444px;
width: 407px;
float: left;
margin-left: 10px;
padding-top: 15px;
border-radius: 10px;
background-color: #686868;
box-shadow: 0 2px 6px 0 rgba(0,0,0,0.2);
}
/* Dividing Line Forcast Div */
.weatherdivider {
height: 1.02px;
width: 100%;
background-color: black;
}
/* Forcast Div For Each Row */
.forecastcontent {
display: inline-block;
width: 407px;
}
.jumbo-padding {
padding: 60px 0;
}
.background-blue {
background-color: #F0F5FB;
}
<div class="weatherwrapper jumbo-padding background-blue">
<div class="weathercontainer">
<h1 align="left">Weather</h1>
<div class="currentweather">
<h3 align="left">Current Weather</h3>
<div class="currentdetails"> 24 degrees address etc </div>
<div class="weathercontent"> </div>
</div>
<div class="forecast">
<div class="forecastcontent">
<h5 style="color: white;"> 5 Day Weather Forecast</h5>
</div>
<div class="weatherdivider"></div>
<div class="forecastcontent">
<h5 style="color: white;">Wednesday</h5>
<p> 19° | 11° </p>
<img src="http://i.imgur.com/Czilat3.png"/>
</div>
<div class="weatherdivider"></div>
<div class="forecastcontent">
<h5 style="color: white;">Thursday</h5>
</div>
<div class="weatherdivider"></div>
<div class="forecastcontent">
<h5 style="color: white;">Friday</h5>
</div>
<div class="weatherdivider"></div>
<div class="forecastcontent">
<h5 style="color: white;">Saturday</h5>
</div>
<div class="weatherdivider"></div>
<div class="forecastcontent">
<h5 style="color: white;">Sunday</h5>
</div>
</div>
</div>
</div>