I've got the below code. Everything is working pretty great except when the browser is wide enough that the text is only one line, the "posts" get misaligned.
Example:
I've messed with all the CSS I can think of and I can't get it to align correctly. Thanks in advance for your help!
Link to jsfiddle: https://jsfiddle.net/BHolm/n68r5xst/167/
/*Feed*/
.feed-row {
padding-bottom: 40px;
padding-right: 20px;
}
.feed-mt .post-submitted-info {
font-weight: 700;
text-align: center;
line-height: 1;
position: relative;
}
.post-submitted-info {
column-width: 55px;
margin-left: 10px;
}
.submitted-date {
border-right: 1px solid #c2c2c2;
}
.submitted-date {
margin-top: 12px;
}
.post-submitted-info .year {
padding-bottom: 8px
}
.post-submitted-info .month, .post-submitted-info .year {
font-size: 14px;
text-transform: uppercase;
}
.feed-mt .post-submitted-info .day {
font-size: 29px;
font-weight: 900;
padding-bottom: 2px;
}
.feed-main-content {
padding-left: 75px;
margin-top: -75px;
}
.field-item{
font-weight: normal;
border-bottom: 1px solid #acacac;
}
.feed-main-content .header {
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Load Handlebars.js from Unpkg. -->
<script src="https://unpkg.com/handlebars@4.5.0/dist/handlebars.min.js"></script>
<!-- Load jQuery and Sheetrock from Unpkg -->
<script src="https://unpkg.com/jquery@3.6.0/dist/jquery.slim.min.js"></script>
<script src="https://unpkg.com/sheetrock@1.2.0/dist/sheetrock.min.js"></script>
<body>
<div id="hf">
<script id="hf-template" type="text/x-handlebars-template">
<!-- Post Date Section -->
<div class="row feed-row feed-mt">
<div class="post-submitted-info">
<div class="submitted-date">
<div class="month">{{cells.Month}}</div>
<div class="day">{{cells.Day}}</div>
<div class="year">{{cells.Year}}</div>
</div>
</div>
<!-- Post Content Section -->
<div class="feed-main-content">
<div class="header">
<h2>{{cells.Header}}</h2>
</div>
<div class="field-item">
<p>{{cells.Content}}</p>
</div>
</div>
</div>
</script>
</div>
</body>
The problem was the top margin that you used, you used it negatively
/*Feed*/
.feed-mt{
display:flex;
gap:10px
}
.feed-row {
padding-bottom: 40px;
padding-right: 20px;
}
.feed-mt .post-submitted-info {
font-weight: 700;
text-align: center;
line-height: 1;
position: relative;
}
.post-submitted-info {
column-width: 55px;
margin-left: 10px;
}
.submitted-date {
border-right: 1px solid #c2c2c2;
}
.submitted-date {
margin-top: 12px;
width:60px;
}
.post-submitted-info .year {
padding-bottom: 8px
}
.post-submitted-info .month, .post-submitted-info .year {
font-size: 14px;
text-transform: uppercase;
}
.feed-mt .post-submitted-info .day {
font-size: 29px;
font-weight: 900;
padding-bottom: 2px;
}
.feed-main-content {
display:flex;
flex-direction:column;
align-items:start;
width:calc(100% - 100px);
}
.field-item{
font-weight: normal;
border-bottom: 1px solid #acacac;
}
.feed-main-content .header {
}