CSS - align text to div - html

Question

I'm struggling with aligning text to div.
I currently have this:
But I want to achieve this (I have just edited a screenshot to show you what I mean):
My code looks as follows:
HTML
<div class="regionHeader">
<div class="regionArrow"></div>
<h2>Some long header that should be aligned to the left next to the div with arrow</h2>
</div>
CSS
.regionHeader {
border-bottom: 1px solid #ffd800;
cursor: pointer;
}
.regionArrow {
border-right: 4px solid #ffd800;
border-bottom: 4px solid #ffd800;
width: 13px;
height: 13px;
transform: rotate(45deg);
float: left;
margin-top: 11px;
margin-right: 13px;
margin-bottom: 0px;
margin-left: 3px;
}
h2 {
font-family: changa-regular;
font-size: 2em;
}
I have already played with display and floats, but it either doesn't work or I'm doing it incorrectly.

Answer 1

You can either simply use a padding-left on your heading:
.regionHeader {
border-bottom: 1px solid #ffd800;
cursor: pointer;
}
.regionArrow {
border-right: 4px solid #ffd800;
border-bottom: 4px solid #ffd800;
width: 12px;
height: 13px;
transform: rotate(45deg);
float: left;
margin-top: 11px 13px 0 3px;
}
h2 {
font-size: 2em;
padding-left: 1.2em; /* <- added */
}
<div class="regionHeader">
<div class="regionArrow"></div>
<h2>Some long header that should be aligned to the left next to the div with arrow</h2>
</div>
Or use a flexbox approach and remove the float.
.regionHeader {
border-bottom: 1px solid #ffd800;
cursor: pointer;
display: flex; /* <- added */
}
.regionArrow {
border-right: 4px solid #ffd800;
border-bottom: 4px solid #ffd800;
width: 16px;
height: 13px;
transform: rotate(45deg);
margin: 30px 15px;
}
h2 {
font-family: changa-regular;
font-size: 2em;
}
<div class="regionHeader">
<div class="regionArrow"></div>
<h2>Some long header that should be aligned to the left next to the div with arrow</h2>
</div>
Browser support for flexbox is pretty good. Don't forget to add proper vendor prefixes.