For some time now, I have been grappling with a CSS issue. I am working with a table that has 3 columns displaying departures, times, and situational text for scenarios like delays or cancellations.
However, as evident from the images, the alignment of the third column is off due to the dynamic nature of the second column's text. Despite trying various CSS properties, I haven't been able to resolve this issue yet. Could it be related to the margin-left and margin-right properties?
CSS
.busStop .tilerow {
display: flex;
border-bottom: 2px solid var(--tavla-border-color);
padding: 1rem 0 0.75rem 0;
&__icon {
min-width: 2rem;
margin-right: 1rem;
font-size: 2rem;
}
&__label {
margin: 0;
margin-top: 0.25rem;
}
&__sublabel {
font-size: 1.25rem;
font-weight: 400;
margin-top: 7px;
margin-left: auto;
margin-right: 72%;
min-width: 5rem;
white-space: nowrap;
&__cancellation {
background-color: $colors-brand-white;
border-radius: 0.5rem;
height: 0.875rem;
overflow: visible;
width: 0.875rem;
}
&__situation {
font-size: 1.125rem;
height: 1.25rem;
margin-left: 72%;
width: 0.875rem;
}
}
}
index.ts
export function TileRow({ label, icon, subLabel }: Props): JSX.Element { return (
<div className="tilerow">
<div className="tilerow__icon">{icon}</div>
<Heading3 className="tilerow__label">{label}</Heading3>
<div className="tilerow__sublabel">
{subLabel.time}
<SubLabelIcon subLabel={subLabel} />
</div>
</div>
)
}