Html CSS-将文本与div对齐

我正在努力将文本与div对齐

我目前有：

但我想实现这一点（我刚刚编辑了一个屏幕截图，向您展示我的意思）：

我的代码如下所示：

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>

---

我已经玩过显示和浮动，但它要么不起作用，要么我做得不正确。

您可以在标题上使用

左填充：


.regionHeader{
边框底部：1px实心#ffd800；
光标：指针；
}
雷吉奥纳罗先生{
右边框：4px实心#ffd800；
边框底部：4px实心#ffd800；
宽度：12px；
高度：13px；
变换：旋转（45度）；
浮动：左；
利润上限：11px 13px 0 3px；
}
氢{
字号：2em；
padding-left:1.2em；/*有人可能会很快提出flexbox解决方案……但我只想在这种情况下绝对定位箭头，并给家长一些padding-left。或者，如果你想保留现有内容，使用浮动-只需为
h2
添加
overflow:hidden
。我已经为你准备了JS小提琴Kacper：.玩得开心：）感谢你的回答。Flexbox让我感觉更好，但我想我会选择填充，因为Flexbox对旧浏览器的支持有限。Flexbox现在得到广泛支持。不过，你应该包括供应商前缀。在线工具为你生成前缀。将供应商前缀添加到
Flexbox
布局也一样。谢谢你指出，@MarioVázquez！相应地更新了我的答案。
.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;
}