Format two divs and two images in one line - html

Question

I have two ul lists that I wrapped in divs and I want them to be side by side. There's a small icon I have left of each title that I want to float next to the title. Below is the code I have so far. It looks find when the window is large but when the window is smaller the second list is pushed under the icon before both the icon and list are pushed under the first. I don't think I formatted my css very well since ideally I would like both the second list and icon to be pushed under the first together, the moment the screen is not wide enough. How should I go about doing this?
Here's my jsfiddle https://jsfiddle.net/hw30en5z/2/
#bullet-title {
font-family: 'Oswald';
color: #004080;
font-size: 22px;
letter-spacing: 1px;
}
.table-icons {
width: 50px;
height: 50px;
margin-right: 10px;
}
#split-half {
padding-top: 2%;
margin: 0 5% 0 5%;
}
#provide {
float: left;
width: 45%;
}
#drawings {
float: left;
}
.list {
list-style: none;
padding: 0;
margin: 0;
}
.list li {
padding-left: 1em;
text-indent: -.7em;
}
.list li:before {
content: "• ";
color: #00AEEF;
}
<div id="split-half">
<img class="table-icons" src="http://animations.fg-a.com/freeicons/1-check-icon-round-purple.png" style="float:left">
<div id="provide">
<p id="bullet-title">Title 1:</p>
<ul class="list">
<li>adss</li>
</ul>
</div>
<img class="table-icons" src="http://animations.fg-a.com/freeicons/1-check-icon-round-purple.png" style="float:left">
<div id="drawings">
<p id="bullet-title">Title 2:</p>
<ul class="list">
<li>dasd</li>
</ul>
</div>
<br style="clear:both;" />
</div>

Answer 1

You could use responsive css to format the site when the screen has different widths. For this, you use the #media tags.
With this, you could make it so that once the screen was a certain width, both of the titles/lists go under the image.
#media (max-width: 500px) {
//css to style objects when screen is smaller than 500px
}
#media (min-width: 500px) {
//css to style objects when screen is bigger than 500px
}
Hope this helped!

Answer 2

You can use display:inline-block on two wrapper divs, to display 2 columns (see example below).
Some notes:
don't use inline styles like <img style="float:left"> if you can avoid it. Your code will soon be a mess, if you mix inline styles with those of your CSS file
don't use IDs multiple times, like <p id="bullet-title">. Use classes instead.
.section {
display: inline-block;
width: 200px;
}
.section > div {
display: inline-block;
}
.bullet-title {
font-family: 'Oswald';
color: #004080;
font-size: 22px;
letter-spacing: 1px;
}
.table-icons {
width: 50px;
height: 50px;
margin-right: 10px;
}
#split-half {
padding-top: 2%;
margin: 0 5% 0 5%;
}
.list {
list-style: none;
padding: 0;
margin: 0;
}
.list li {
padding-left: 1em;
text-indent: -.7em;
}
.list li:before {
content: "• ";
color: #00AEEF;
}
<div id="split-half">
<div class="section">
<img class="table-icons" src="http://animations.fg-a.com/freeicons/1-check-icon-round-purple.png">
<div id="provide">
<p class="bullet-title">Title 1:</p>
<ul class="list">
<li>adss</li>
</ul>
</div>
</div>
<div class="section">
<img class="table-icons" src="http://animations.fg-a.com/freeicons/1-check-icon-round-purple.png">
<div id="drawings">
<p class="bullet-title">Title 2:</p>
<ul class="list">
<li>dasd</li>
</ul>
</div>
</div>
</div>