Make Parent Div Wrap Around Dynamic Absolute Child Div (Tabs + Content) - css

Question

I need the content below the (tabs+selected-content) to respect the space of the absolute selected-content currently being displayed on the page within the parent container of relative. Anyone have any ideas how to do this?
code sandbox: https://codesandbox.io/s/tabs-content-space-respected-m0gql
Files
App.js
import "./styles.css";
import TabsWithContent from "./Components/TabsWithContent.js";
export default function App() {
return (
<div>
<TabsWithContent />
<h1 style={{textAlign: "center"}}>I am the next content, please respect my space</h1>
</div>
);
}
Components\TabsWithContent.js
import React, { useState } from "react";
// Data from backend
import { tabOneContent, tabTwoContent, tabThreeContent } from '../BackendData/TabsContent.js';
const TabsWithContent = () => {
// Variables
const [tabSelected, setTabSelected] = useState(1);
// Functions
const changeTab = (ev, tabNum) => {
ev.preventDefault();
setTabSelected(tabNum);
};
// Render
return (
<div className="div-tabs-with-content">
<div className="page-container-content">
<h2>Tabs Example</h2>
<div className="div-tabs">
<button onClick={ev => changeTab(ev, 1)} style={tabSelected === 1 ? {color: "#ffffff", backgroundColor: "#003478"} : {}}>Tab One</button>
<button onClick={ev => changeTab(ev, 2)} style={tabSelected === 2 ? {color: "#ffffff", backgroundColor: "#003478"} : {}}>Tab Two</button>
<button onClick={ev => changeTab(ev, 3)} style={tabSelected === 3 ? {color: "#ffffff", backgroundColor: "#003478"} : {}}>Tab Three</button>
</div>
<div className="div-tabs-content-container">
<section className={tabSelected === 1 ? "div-tabs-content active" : "div-tabs-content"}>
{tabOneContent.map((content, index) =>
<div key={index}><i className="fa fa-check"></i><p>{content}</p></div>
)}
</section>
<section className={tabSelected === 2 ? "div-tabs-content active" : "div-tabs-content"}>
{tabTwoContent.map((content, index) =>
<div key={index}><i className="fa fa-check"></i><p>{content}</p></div>
)}
</section>
<section className={tabSelected === 3 ? "div-tabs-content active" : "div-tabs-content"}>
{tabThreeContent.map((content, index) =>
<div key={index}><i className="fa fa-check"></i><p>{content}</p></div>
)}
</section>
</div>
</div>
</div>
);
};
export default TabsWithContent;
BackendData\TabsContent.js
const tabOneContent = ["Content One", "Content Two", "Content Three"];
const tabTwoContent = ["Content One", "Content Two", "Content Three", "Content Four", "Content Five", "Content Six"];
const tabThreeContent = ["Content One", "Content Two", "Content Three", "Content Four", "Content Five", "Content Six", "Content Seven", "Content Eight"];
export {
tabOneContent,
tabTwoContent,
tabThreeContent
}
index.css
.App {
font-family: sans-serif;
}
.page-container-content {
display: block;
position: relative;
width: 100%;
max-width: 1200px;
padding: 0 25px 0 25px;
margin: 0 auto;
}
.div-tabs-with-content {
display: block;
width: 100%;
margin-bottom: 60px;
}
.div-tabs-with-content h2 {
margin-bottom: 20px;
color: #003478;
font-family: sans-serif;
font-size: 2.8rem;
font-weight: 700;
line-height: 36px;
text-align: center;
}
.div-tabs {
display: flex;
justify-content: space-around;
margin-bottom: 2rem;
}
.div-tabs button {
height: 50px;
width: 210px;
color: #003478;
background-color: #ffffff;
border: none;
font-family: sans-serif;
font-size: 2.4rem;
font-weight: 600;
line-height: 3.6rem;
outline: none;
cursor: pointer;
}
.div-tabs button:hover {
opacity: 0.7;
color: white;
background-color: #003478;
transition: 0.2s ease-in;
}
.div-tabs-content-container {
display: block;
position: relative;
width: 100%;
}
.div-tabs-content {
position: absolute;
left: 26%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
max-width: 600px;
visibility: hidden;
opacity: 0;
}
.div-tabs-content-container .active {
transition: opacity 0.75s;
visibility: visible;
opacity: 1;
}
.div-tabs-content div {
display: flex;
align-items: center;
width: 200px;
}
.div-tabs-content i {
width: 24px;
height: 24px;
font-size: 1.6rem;
padding: 2.5px;
margin-right: 10px;
font-weight: 300;
color: #003478;
border: 2px solid #003478;
border-radius: 50%;
}
.div-tabs-content p {
color: #000000;
font-size: 1.6rem;
font-weight: 300;
line-height: 26px;
}

Answer 1

Check the working solution - https://codesandbox.io/s/tabs-content-space-respected-forked-lzrkh
.div-tabs-content-container .active {
transition: opacity 0.75s;
visibility: visible;
opacity: 1;
position: relative; /* you can use unset also */
}
I think it solved your problem.