Currently, the Student_comment is displayed using display flex and flex direction row. However, I am looking to reposition the description closer to the student name so that it is more aligned with the date. I have attempted adjusting padding and margin properties without success. Here is the snippet of 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>