Just getting started with HTML/CSS here! I'm trying to figure out how to keep a line directly under an h2 tag. In my code, there's an h2 tag labeled 'Instructions' followed by a div containing 3 other divs making up a line segment. By default, the line sits on the left side, but I want it to stay fixed under the h2 tag when the browser is resized.
I found a resource at that explores absolute/relative positioning which seems like it could help. However, my attempts haven't been successful so far.
Please see below for my HTML/CSS and a jsfiddle (note: the jsfiddle does not display the line behavior accurately when the browser size changes). Any guidance or additional resources would be greatly appreciated!
I understand this might seem trivial, but I'm working hard to learn. There were multiple methods I came across, but they all seemed quite complex.
HTML
<div id="instructions_box">
<h2>Instructions</h2>
<div class="line_divider">
<div class="blue_line"></div>
<div class="yellow_line"></div>
<div class="blue_line"></div>
</div>
</div>
CSS
#instructions_box{
display: inline-block;
//position: relative;
}
.line_divider{
background-color: aqua;
//position: absolute;
//bottom: 0;
//right: 2rem;
}
.blue_line{
height: 2px;
width: 50px;
background-color: rgb(0,0,139);
float: left;
}
.yellow_line{
height: 2px;
width: 90px;
background-color: yellow;
float: left;
}
#instructions_box h2{
text-align: center;
}
https://jsfiddle.net/10szzwvs/1/
Thanks