Help positioning elements

I’m having trouble figuring out how to get icons to line up to the left of h2 a p elements. Any help would be appreciated.

https://codepen.io/barker716/pen/WNejNdw

@Codeman543 So what I understood from your question is that you want div with icon class to align to the left of the below div with art class inside divs with line class inside the section tags.

So specifically, you are talking about this code snippet –

<section id="details">
<div class="line" style="display: flex;">
<div class="icon"><i class="fa fa-tree" style="font-size:48px;color:teal" aria-hidden="true"></i></div>
<div class="art">
<h2>Select Wood</h2>
<p>We use only the highest quality of locally sourced wood.</p>
</div>
</div>
<div class="line">
<div class="icon"><i class="fas fa-drafting-compass" style="font-size:48px;color:teal" aria-hidden="true"></i></div>
<div class="art"><h2>Custom Designs</h2>
<p>We build the picture frames to any design you can imagine.</p>
</div>
</div>
<div class="line">
<div class="icon"><i class="fas fa-dragon" style="font-size:48px;color:teal" aria-hidden="true"></i></div>
<div class="art">
<h2>Guarantee</h2>
<p>100% satisfaction or your money back!</p>
</div>
</div>
</section>

So if I have rightly understood your problem, my suggestion would be to contain both of the element divs inside a flexbox(assign ‘display: flex’ to parent div with line class) to align them as you wish.

Hope this helps. Keep posted.

Thanks

Yes, that’s helpful. I’ve been playing around with it, and I usually get something like this where the h2 and p aren’t lined up vertically. Any other thoughts?

https://codepen.io/barker716/pen/WNejORv