Aha! That didn’t quite do it, but you set me down the path to a solution that did. Thank you!
The trick is to absolute position the blog post title (.feed-title
) with a CSS left property (I used 6rem), and then add an auto margin to the .feed-right
class to keep it on the right side of the table. So the updated CSS is:
.feed-title {
flex-grow: 1;
position: absolute;
left: 6rem;
overflow: hidden;
margin-top: 0;
margin-bottom: 0;
padding-right: 1rem;
font-size: 1.6rem;
font-weight: 400;
text-overflow: ellipsis;
white-space: nowrap;
font-family: var(--font-base);
}
.feed-right {
display: flex;
align-items: center;
transition: margin 0.2s var(--animation-base);
margin-left: auto;
}
Update: One quick thing: you’ll also need to define a width for .feed-title
so that it doesn’t overlap with the reading time on mobile. You’ll have to play with the width depending on how you have it set up, but I picked 80% standard and did a media query for mobile to set it at 63%.