I have 2 Tabs next to each other and some text (p) below the tabs.
Margin-Top of P is and stays equal to the height of the longest content of a tab.
How can i make it, that the Margin-Top of my P is always the same, ex.: 20px ?
<div class="wrapper">
<button> Tab 1</button>
<button> Tab 2</button>
<div id="tab" class="tabs inliner">
<div>
<h2>Content 1 </h2>
</div>
<div>
<h2>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam </h2>
</div>
</div>
</div>
<p>Margin-Top of this text is set for the longest content. How to change that?</p>
.wrapper {
overflow: hidden;
}
.tabs {
position: relative;
-webkit-transition: all .9s ease-in-out;
-moz-transition: all .9s ease-in-out;
-ms-transition: all .9s ease-in-out;
-o-transition: all .9s ease-in-out;
transition: all .9s ease-in-out;
}
.active {
color:blue;
}
.tabs> * {
width: 100%;
}
.tabs[data-tab='1'] {
transform: translateX(-100%);
}
.tabs[data-tab='2'] {
transform: translateX(-200%);
}
.tabs[data-tab='3'] {
transform: translateX(-300%);
}
.tabs[data-tab='4'] {
transform: translateX(-400%);
}
.inliner {
white-space: nowrap;
}
.inliner > * {
display: inline-block;
*display: inline;
*zoom: 1;
font-size: 1rem;
letter-spacing: normal;
vertical-align: top;
word-spacing: normal;
white-space: normal;
}
const btn = [].slice.call(document.getElementsByTagName('button'))
btn.forEach((item, index) => {
item.addEventListener('click',function(){
btn.forEach((item) => {item.classList.remove('active')})
item.classList.add('active')
document.getElementById('tab').setAttribute('data-tab', index)
})
}
)
What I have tried:
New to CSS and no experience with JS.
Really appreciated if someone can help me out on that.
Many thanks