CSS content aligns incorrectly when only one line of text

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/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<!-- Load Handlebars.js from Unpkg. -->
<script src="https://unpkg.com/[email protected]/dist/handlebars.min.js"></script>

<!-- Load jQuery and Sheetrock from Unpkg -->
<script src="https://unpkg.com/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://unpkg.com/[email protected]/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>