I am looking to create two divs that each take up 100% width, but I am open to other configurations. Additionally, the active tab should have an arrow displaying below it.
Despite using flex-grow in my flexbox setup, the placement of the after pseudo-element arrow does not seem to be affected. When in full screen mode, the arrow is visible, but once flex-grow comes into play, the arrow remains stationary and gets hidden behind the background color.
https://codepen.io/sherrylking/pen/MWWXEBv
.qo-tab-section {
display: flex;
}
.qo-tab-section div {
padding: 20px 20px 20px 20px;
flex-basis: 50%;
}
.qo-active-tab:after {
content:'';
position: relative;
border-style: solid;
border-width: 20px 20px 0;
border-color: #027777 transparent;
display: block;
width: 0;
z-index: 1;
top: 43px;
}