Is it possible to add another span below the first span and keep it on the same line as the circle?
Check out this link for reference
The following is the HTML code snippet:
<div class="dialog-box">
<div class="dialog-box-circle"></div>
<span class="dialog-box-name">My Name -
<select>
<option>@private</option>
<option>@public</option>
</select>
</span>
<span class="dialog-box-day">theproblem<span>
<span class="dialog-box-text">Don't forget to bring the new calendar for the meeting.</span>
</div>
The CSS code snippet is as follows:
.container{
position:absolute;
width:382px;
height:529px;
border:1px solid black;
background-color:#cccccc;
}
header{
position:relative;
width:100%;
height:41px;
color:white;
background-color:#de4b4b;
font-weight: bold;
font-size:14px;
margin:auto;
}
header span{
display:inline-block;
padding-left:172px;
padding-top:14px;
padding-bottom:14px;
}
.sub-header{
position:relative;
width:100%;
height:37px;
background-color:white;
font-size:10px;
margin:auto;
color:black;
}
.sub-header span{
display:inline-block;
padding-top:14px;
padding-left:10px;
}
.dialog-box{
position:absolute;
width:365px;
background-color:white;
margin: 10px 8px 10px 8px;
border:1px solid #cccccc;
}
.dialog-box-circle{
display:inline-block;
position:relative;
width:35px;
height:35px;
border-radius:30px;
background-color:#cccccc;
margin:15px 10px 17px 15px;
vertical-align:middle;
}
.dialog-box-name{
display:inline-block;
color:#6495ED;
font-size:12px;
}
.dialog-box-text{
display:inline-block;
color:#cccccc;
font-size:10px;
font-family:'roboto_light';
margin-left:15px;
}
.dialog-box-name select {
border:0px;
font-size:10px;
font-family:'roboto_light';
color:#454545;
}
.dialog-box-name select option{
}
.dialog-box-day{
display:inline-block;
font-size:9px;
font-family:'roboto_light';
}
ul{
display:inline-block;
list-style: none;
}
At the top of the page, there is a convenient link provided for ease of access.