javascripthtmlcssbootstrap-4

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:

misaligned row

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>

Solution

  • 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 {
    
}