Html div标记在一行中，带有装饰下划线

我试图将三个div标记设置为一行，并用一些空格和不同的下划线颜色分隔。为了让事情变得更简单，我正在尝试这样做：

请参阅科技、分享和推文中的帖子。这就是我想做的。我看到了他们的源代码，并试图模仿。但失败了。你能帮帮我吗

<div class="source">
    <a href="#"><h3>source</h3></a>
</div>
<div class="share">
    <h3>share</h3>
</div>
<div class="share">
    <h3>tweet</he>
</div>

分享
推特

请删除内联样式并在样式表中添加类：

<div style="float:left; border-bottom:2px solid #1D1D1B; width:48%; margin-right:2%"><a href="#">POSTED IN TECH</a>
</div>
<div style="float:left; border-bottom:2px solid #FB473A; width:23%; margin-right:2%;">SHARE
</div>
<div style="float:left; border-bottom:2px solid #FB473A; width:23%;  margin-right:2%;">TWEET
</div>

分享
推特

div
{
显示：内联块；
}
.来源
{
边框底部：1px实心#000；
}
.分享
{
边框底部：1px纯红；
}

分享
推特

为了实现屏幕截图中的功能，请保留已发布的HTML，并为其编写CSS，如下所示。（根据需要更改颜色和宽度）

问候

---

Manoj Soni

使用

显示：flexbox

将项目居中放置在同一行中，

边框底部

获取彩色线条，

右边距

获取间距

.source、.share{
字体系列：无衬线；
宽度：100%；
右边距：5px；
}
.来源a{
文字装饰：无；
颜色：黑色；
}
.source h3、.share h3{
边缘底部：5px；
}
.分享{
底部边框：2倍纯红；
}
.来源{
边框底部：2倍纯色灰色；
}
.flex{
显示器：flex；
宽度：100%；
-webkit内容：中心；
证明内容：中心；
}

分享
推特

添加类似此共享的css{边框底部：1px纯红；}非常感谢，这非常有效。但唯一的问题是它需要在顶部和底部之间留有余量，现在我的看起来像这样；尝试的顶部和底部边缘：2%；但它把整个事情搞砸了

.source {border-bottom:2px solid #000; width:48%; padding-bottom:10px; margin-right:2%}
.share {border-bottom:2px solid #d90000; width:23%; padding-bottom:10px; margin-right:2%}
.share:nth-child(2) {margin-right:0}