I'm building a vertical stepper component in React with a title inside a circle that has absolute positioning. The problem is that since the title is absolutely positioned, it doesn't grow or expand with the content, which causes the subtitle and description to overlap with the title. The goal is to build a component similar to the experience section on LinkedIn, where users can add their work experience. Each entry would have a dot (or circle) on the left, representing a step or item, with the title of the experience (e.g., job title) next to it. Below the title, there would be a section for additional details, like the description of the role or other relevant information.
Here is my code:
const VerticalStepperItemUIComponent = ({ title, subtitle, description }) => (<div className="vertical-stepper-item-ui-component-container"><div className="vertical-stepper-item-ui-component-container__circle-container"><div className="vertical-stepper-item-ui-component-container__circle"><div className="vertical-stepper-item-ui-component-container__title"> {title}</div></div><div className="vertical-stepper-item-ui-component-container__border"></div></div><div className="vertical-stepper-item-ui-component-container__details-container"><div>{subtitle}</div><div>{description}</div></div></div>);ReactDOM .createRoot(root) .render(<VerticalStepperItemUIComponent title="title" subtitle="subtitle" description="description" /> );.vertical-stepper-item-ui-component-container { display: flex;}.vertical-stepper-item-ui-component-container__circle-container { display: flex; flex-direction: column; align-items: center;}.vertical-stepper-item-ui-component-container__circle { position: relative; width: 18px; height: 18px; border-radius: var(--border-radius-full); border: 1px solid black;}.vertical-stepper-item-ui-component-container__border { width: 1px; background-color: black; flex-grow: 1;}.vertical-stepper-item-ui-component-container__details-container { display: flex; flex-direction: column; padding-top: var(--spacing-lg); padding-bottom: var(--spacing-md); padding-left: var(--spacing-xs);}.vertical-stepper-item-ui-component-container__title { position: absolute; left: 26.5px; top: 0;}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.production.min.js"></script><div id="root"></div>The issue:
Since the .vertical-stepper-item-ui-component-container__title has position: absolute, it doesn't occupy space in the layout flow, causing the subtitle and description to appear on top of the title. I want the title to expand the layout properly so that the subtitle and description are pushed down accordingly, but I’m unsure how to adjust the layout to achieve this effect without breaking the overall design in order to have the circle and the title perfectly aligned.
I tried changing the title's position to
relative, but it messes with the layout.I also considered using
display: flexfor the container, but that didn’t solve the issue.
