I have a code snippet below. It's functioning well, except for when the browser window is wide enough that the text fits in just one line, the "posts" become misaligned.
For example:
https://i.sstatic.net/feJjLH6t.png
I've tried tweaking the CSS but can't seem to get it aligned properly. Thank you in advance for any 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="86e4e9e9f2f5f2f4e7f6c6b2a8b5a8b7">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Load Handlebars.js from Unpkg. -->
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9bf3faf5fff7fef9fae9e8dbafb5aeb5ab">[email protected]</a>/dist/handlebars.min.js"></script>
<!-- Load jQuery and Sheetrock from Unpkg -->
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="92f8e3e7f7e0ebd2a1bca4bca2">[email protected]</a>/dist/jquery.slim.min.js"></script>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7e0d161b1b0a0c111d153e4f504c504e">[email protected]</a>/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>