Instead of using divs use pseudo elements. Do something like this :
* {
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
}
body {
height: 100vh;
display: grid;
place-items: center;
}
.content {
padding: 2rem 0;
position: relative;
display: flex;
margin: 0 2rem;
padding-left: 1.5rem;
flex-direction: column;
font-family: Inter, sans-serif;
}
.content .title {
display: flex;
align-items: center;
}
.content .title:not(:first-child) {
margin-top: 1.25rem;
}
.content .title::before {
content: "";
position: absolute;
left: 0;
width: 1rem;
height: 1rem;
border-radius: 50%;
background-color: red;
}
.content p {
position: relative;
line-height: 1.5;
}
.content p::before {
content: "";
position: absolute;
top: 0;
left: -16.5px; /* because the width of line is 1px */
width: 1px;
height: 100%;
background-color: red;
}
<div class="content">
<h2 class="title">Friday 7, 2010</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
<h2 class="title">Thursday 12, 2014</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eveniet tempore facere delectus maiores excepturi, ducimus, rem, commodi fugiat quam nisi aliquam vel quos. Ipsa cupiditate ratione beatae fugit adipisci explicabo saepe, dolor asperiores cum
voluptates mollitia laudantium hic aperiam impedit?</p>
<h2 class="title">Monday 30, 2019</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eveniet tempore facere delectus maiores excepturi, ducimus, rem</p>
</div>
Here’s a strategy using much less markup (which I usually prefer). It relies on pseudo-elements and left padding, mostly.
.content {
padding-left: 10px; /* space for bigger dots */
}
.content .text {
padding-top: 10px; /* instead of bottom margin on the title */
margin-bottom: 20px; /* space between content blocks */
}
.content .title,
.content .text {
position: relative;
padding-left: 20px; /* space for the border elements */
}
.content .title:before,
.content .title:after,
.content .text:after {
content: '';
position: absolute;
left: 0;
top: 50%;
height: 100%;
transform: translateX(-50%); /* bring it left half width of the line to center it */
background: red;
}
.content .title:before {
transform: translate(-50%, -50%); /* up and left half the diameter of the circle to center it */
width: 8px;
height: 8px;
border-radius: 50%;
}
.content .title.bigger-dot:before {
width: 18px;
height: 18px;
}
.content .title:after,
.content .text:after {
width: 2px;
}
.content .text:after {
top: 0;
}
<div class="content">
<div class="title">Header</div>
<div class="text">Wait! Some of your past questions have not been well-received, and you're in danger of being blocked from asking any more. For help formulating a clear, useful question, see: How do I ask a good question?</div>
</div>
<div class="content">
<div class="title bigger-dot">Header</div>
<div class="text">Wait! Some of your past questions have not been well-received, and you're in danger of being blocked from asking any more. For help formulating a clear, useful question, see: How do I ask a good question? Also, edit your previous questions to improve
formatting and clarity.Wait! Some of your past questions have not been well-received, and you're in danger of being blocked from asking any more. For help formulating a clear, useful question, see: How do I ask a good question? Also, edit your previous
questions to improve formatting and clarity.</div>
</div>
You need to put the align text and the red circle into one div and give that div
.div {
display: flex;
align-items: center;
}
I have the following HTML structure:
https://play.tailwindcss.com/se2rJ5Y3wt?file=css
.block {
display: flex;
}
.timeline {
display: flex;
flex-direction: column;
min-height: max-content;
align-items: center;
justify-content: flex-start;
}
.circle {
background: red;
width: 8px;
height: 8px;
border-radius: 50%;
}
.vline {
width: 2px;
background: red;
height: 100%;
margin-top: 2px;
}
.content {
padding-left: 10px;
}
.title {
margin-bottom: 10px;
}
<div class="block">
<div class="timeline">
<div class="circle"></div>
<div class="vline"></div>
</div>
<div class="content">
<div class="title">Header</div>
<div class="text">Wait! Some of your past questions have not been well-received, and you're in danger of being blocked from asking any more. For help formulating a clear, useful question, see: How do I ask a good question? Also, edit your previous questions to improve
formatting and clarity.Wait! Some of your past questions have not been well-received, and you're in danger of being blocked from asking any more. For help formulating a clear, useful question, see: How do I ask a good question? Also, edit your previous
questions to improve formatting and clarity.</div>
</div>
</div>
Problem is I try to align .title text with middle of red circle (no depends circle radius):
How to do that using adaptive way, not using negative margin and position?
Please ask a more specific question. That selector list just sets default styles for those pseudo-elements.
