Make flex items closer to each other-CodePudding

how it looks

I need to make the description closer to the student name, the Student_comment is currently in display flex and flex direction row but I need to make the description to the top so it's closer to the date and student name, I tried padding and margin but none worked. here's my code:

 .Student_Comment1 {
  display: flex;
  flex-direction: row;
}

.StudentComments_DashBoard {
  width: 80%;
  margin: auto;
  padding-top: 2vw;
}

.StudentComment_Description {
  padding-left: 3.7vw;
  padding-bottom: 1vw;
}

.Student_CommentDate {
  padding-left: 1.5vw;
  font-size: 0.9vw;
  padding-top: 0.3vw;
}

.StudentName_Comment {
  font-weight: 500;
  font-size: 1.3vw;
}

.dotForStudent {
  height: 2.5em;
  width: 2.5em;
  border-radius: 50%;
  border: 1px solid grey;
  background-color: white;
  margin-top: 0.9vw;
  margin-right: 1vw;
}

<div class="StudentComments_DashBoard">
    <div class="StudentCom_DashBoard">
       <div class="Student_Comment1">
          <span class="dotForStudent"></span>
          <div class="StudentName_Comment">
            Student Name
          </div>
          <div class="Student_CommentDate">
            &nbsp; May 11, 2021
          </div>
       </div>
       <div class="StudentComment_Description">Lorem ipsum lorem ipsum lorem ipsum lorem ipsum ?
       </div> 
    </div>
 </div>

CodePudding user response：

Add align-items: flex-end; to your Student_Comment1 class CSS

.Student_Comment1 {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}