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">
May 11, 2021
</div>
</div>
<div class="StudentComment_Description">Lorem ipsum lorem ipsum lorem ipsum lorem ipsum ?
</div>
</div>
</div>Add align-items: flex-end; to your Student_Comment1 class CSS
.Student_Comment1 {
display: flex;
flex-direction: row;
align-items: flex-end;
}