Is it possible to accomplish this with CSS Grid ?
If you notice in the screenshot, the paragraph under "Word 2" is a bit long, it also has some margin from the top, as opposed to the column belonging to "Word 1". The ideal outcome is for the "Word 3" cell to keep it's distance from "Word 1".
However the outcome is not so. The screenshot below shows what happens. Because the paragraph in "Word 2" is long, then it takes up some extra space and looks mis-aligned.
In the past I've fixed this by splitting up these two columns into complete separate ones with some JavaScript, and give the second column some margin from the top and looks fine, but I'd rather check to see if it's possible to do this with CSS alone.
The parent container:
display: grid;
grid-template-columns: repeat(2, 1fr);
margin-bottom: 100px;
align-items: flex-start;
Each cell:
display: grid;
grid-template-columns: 32px auto;
grid-column-gap: 20px;
grid-template-rows: 32px repeat(2, auto);
position: relative;
padding: 25px 0;
&::after {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: calc(100% - 52px);
height: 1px;
background-color: gray;
}
