Reduce the bottom border width

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>