Active tab border bottom under the div instead in the div - html

Question

I have made a tab wrapper with 2 tabs. Under the tabs I have a div with content.
This is my code:
.tab-wrapper {
width: auto;
padding-left: 17px;
background-color: aqua;
white-space: nowrap;
display: table-cell;
}
.content {
background-color: aqua;
}
.role-tab {
cursor: pointer;
display: inline-block;
height: 50px;
overflow: hidden;
text-align: center;
text-overflow: ellipsis;
vertical-align: middle;
margin-right: 19px;
}
.role-tab>p {
display: table-cell;
height: 50px;
overflow: visible;
vertical-align: middle;
width: 100%;
}
.role-tab-active {
border-bottom: 3px #108DE7 solid;
font-weight: bold;
}
<div class="tab-wrapper">
<div class="role-tab role-tab-active">
<p>Role tab 1</p>
</div>
<div class="role-tab">
<p>Role tab 2</p>
</div>
</div>
<div class="content">
<p>Content</p>
</div>
The styling and everything are working good. Now I want to add some padding-top so the border-bottom will go under the div. This is a screenshot what I want:
I want that the border-bottom goes under the div instead of in the div.
I have tried margin-top, padding-top and top, but it didn't work
How can I achieve when the tab is active that the border-bottom goes under the div instead inside it?

Answer 1

just set the margin-bttom: -3px; for the active class and its done :
.role-tab-active {
margin-bottom:-3px;
border-bottom: 3px #108DE7 solid;
font-weight: bold;
}
see below snippet :
.tab-wrapper {
width: auto;
padding-left: 17px;
background-color: aqua;
white-space: nowrap;
display: table-cell;
}
.content{
background-color: aqua;
}
.role-tab {
cursor: pointer;
display: inline-block;
height: 50px;
overflow: hidden;
text-align: center;
text-overflow: ellipsis;
vertical-align: middle;
margin-right: 19px;
margin-bottom:-3px;
}
.role-tab > p {
display: table-cell;
height: 50px;
overflow: visible;
vertical-align: middle;
width: 100%;
}
.role-tab-active {
margin-bottom:-3px;
border-bottom: 3px #108DE7 solid;
font-weight: bold;
}
<div class="tab-wrapper">
<div class="role-tab role-tab-active">
<p>Role tab 1</p>
</div>
<div class="role-tab">
<p>Role tab 2</p>
</div>
</div>
<div class="content">
<p>Content</p>
</div>

Answer 2

You can't move borders via padding and margin. It's not an element but part of the element.
Give the .tab-wrapper a static height instead of default auto. Whatever the size of your border, the containing div will adjust to it instead, so we give it a static height to allow overflow. And then make it display:flex.
.tab-wrapper {
width: auto;
padding-left: 17px;
background-color: aqua;
white-space: nowrap;
display: flex;
height: 50px;
}
You can see that both the parent and tab items are of 50px height, but that's not really the case when rendered. box-sizing: content-box being the default css property, your official active role tab height is 53px, thus, overflowing the div by 3px and giving the border an "under the div" effect
Fiddle: https://jsfiddle.net/c5u3wzv2/5/