CSS Responsive Margin-CodePudding

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 ?

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)
  })
}  
)

.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;
}

<div >
  
      <button> Tab 1</button>
       <button> Tab 2</button>
        
    <div id="tab" >
        <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>

I tried around with lot of CSS but couldn't make it work.

stackoverflow is asking for more details but dont know what else to add.

If you need any more details, i will gladly provide them

CodePudding user response：

I think you can only change the #tab height dynamically, check the code below:

document.getElementById('tab').style.height = document.querySelector(`#tab div`).getBoundingClientRect().height   'px'

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)

    const currentTab = index === 0 ? document.querySelector(`#tab div`) : document.querySelector(`#tab div   div`)
    document.getElementById('tab').style.height = currentTab.getBoundingClientRect().height   'px'
  })
}  
)

.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;
}

<div >
  
      <button> Tab 1</button>
       <button> Tab 2</button>
        
    <div id="tab" >
        <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>