Reduce the bottom border width - css

Question

I have two tabs and they have bottom-borders. This is the jsfiddle example.
<div class="component-content">
<div class="tabs-inner">
<ul class="tabs-heading">
<li tabindex="0" class="active">
<div>
<div class="row">
<div class="component content col-12">
<div class="component-content">
<div class="field-heading">TAB 1: STANDARD SMALL</div>
</div>
</div>
</div>
</div>
</li>
<li tabindex="-1">
<div>
<div class="row">
<div class="component content col-12">
<div class="component-content">
<div class="field-heading">TAB 2: STANDARD SMALL</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
.tabs-heading {
display: table;
table-layout: fixed;
width:100%;
}
.tabs-heading li {
display: table-cell;
border-bottom: 2px solid red;
}
I want to add padding in the border bottom so that it should look like this
I tried to add padding-bottom but it didn't work.
Any suggestion or help would be appreciated

Answer 1

I am not quite sure if I got your question right ... but maybe you are looking for something like this ...?
If you don't use table and table-cell ... but flexbox instead ... all tabs will get automatically the same height and you are able to work with padding-bottom. If you like you can add margins between tabs as well.
#wrapper {
display: flex;
align-items: stretch;
background-color: Gray;
}
#wrapper div {
padding-bottom: 10px;
border-bottom: 2px solid orange;
}
#one {
background-color: green
}
#two {
background-color: blue
}
#three {
background-color: red
<div id="wrapper">
<div id="one">one one one one one one one one one one one one one one one one one one one one one</div>
<div id="two">two two two two two two</div>
<div id="three">three</div>
</div>