Div Within a Div - Positioned at the Top - html

Question

I am wanting to place a div within another div. The point is to create a border at the top of the div. The border will include a small icon image at the left, and a headline.
I am thinking that there will actually need to be a total of three divs within the main div (lighter grey color). Main border div (100% width...the dark grey color example), then within that div will be two more divs. Div for the small icon (20% width), and a div for the headline content (80% width).
How do you position those three divs (dark grey color), within the main div (lighter grey color) to act like a border at the top? Any short examples would be greatly appreciated.
A link to an example image is provided...
enter image description here

Answer 1

Something like this might get you started:
.panel {
display: block;
position: relative;
width: 30vw;
height: 50vh;
background-color: #CCC;
}
.panel header {
width:100%;
background-color: #999;
border-bottom: 1px solid black;
}
.panel footer {
font-size: 60%;
position: absolute;
bottom: 0;
width:100%;
border-top: 1px solid black;
text-align: center;
}
<section class="panel">
<header>
something something
</header>
<div class='content'>
content content
</div>
<footer>
panel footer
</footer>
</section>

Answer 2

Use this
.cont {
width:400px;
height:500px;
background: lightgray;
position: relative;
}
.header {
position: absolute;
left: 0;
top: 0;
width:100%;
height:80px;
background: gray;
color:#fff;
font-size:40px;
font-family: sans-serif;
line-height:80px;
padding:0 0px 0 70px;
box-sizing:border-box;
}
img {
position: absolute;
left:10px;
top:50%;
transform:translateY(-50%);
}
<div class="cont">
<div class="header">
<img src="https://picsum.photos/50" alt="">
HEADLİNE
</div>
</div>

Answer 3

<div class="box">
<h2>
<span class="box__icon"></span>
Headline
</h2>
<div class="box__content">
Content
</div>
</div>
https://codepen.io/anon/pen/OdYaeY

Answer 4

Your thinking is fine, just be sure to use a naming convention that is consistent and works for you. Here's an example you can feel free to use:
.container {
width: 300px;
height: 350px;
margin: 0 auto;
font-family: Arial, Helvetica, Verdana;
font-size: .95rem;
}
.header {
background: #999;
color: white;
text-transform: uppercase;
padding:.5em;
font-size: 1.3rem;
}
.header .icon {
display:inline-block;
min-height: 1rem;
min-width: 20px;
border: 1px solid white;
}
.body {
background: #ccc;
height: 100%;
padding: 1rem;
}
<div class="container">
<div class="header">
<span class="icon"></span>
<span class="title">headline</span>
</div>
<div class="body">
This is your body block
</div>
</div>