How can I use span like table? - html

Question

I have this HTML structure:
.subject{
width: 50px;
}
<div>
<span class = "subject">Name:</span>
<span class="content">John</span>
</div>
<div>
<span class = "subject">Age:</span>
<span class="content">23</span>
</div>
<div>
<span class="subject">cell phone:</span>
<span class="content">[phone]</span>
</div>
As you see, those columns aren't in the same line. I want this output:
/*
Name: John
Age: 23
cell phone: [phone]
How can I do that?
Actually I need a fixed-width for span.subject the size of biggest content length which is cell phone in this case.
Here is my code in reality:
.notifications_list{
margin-top: 1px;
padding-right: 15px;
direction: rtl;
overflow: scroll;
width: 100%;
height: 100%;
}
.notifications_list li{
list-style: none;
}
.notification_date_title{
font-size: 14px;
margin-top: 10px;
}
.note_icon{
}
.note_icon i{
font-size: 20px;
margin: 0px;
}
.note_type{
margin-right: 5px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="notifications_list">
<div class="notification_date_title">امروز +5</div>
<ul>
<li><a><div><span class="note_icon"><i class="fa fa-sort"></i></span><span class="note_type">رای</span><span class="note_date_time">2 ساعت قبل</span></div></a>
</li>
</ul>
<div class="notification_date_title">دیروز +10</div>
<ul>
<li><a><div><span class="note_icon"><i class="fa fa-sort"></i></span><span class="note_type">رای</span><span class="note_date_time">14 ساعت قبل</span></div></a>
</li>
</ul>
<div class="notification_date_title">در هفته گذشته </div>
<ul>
<li><a><div><span class="note_icon"><i class="fa fa-check"></i></span><span class="note_type">تایید جواب</span><span class="note_date_time">2 روز قبل</span></div></a>
</li>
<li><a><div><span class="note_icon"><i class="fa fa-sort"></i></span><span class="note_type">رای</span><span class="note_date_time">3 روز قبل</span></div></a>
</li>
</ul>
</div>

Answer 1

You can use display:table, display:table-row and display:table-cell to make span as table

Answer 2

Use display: table-cell;
.subject {
display: table-cell;
width: 80px;
}
div {
display: table-row;
}
<div>
<span class="subject">Name:</span>
<span class="content">John</span>
</div>
<div>
<span class="subject">Age:</span>
<span class="content">23</span>
</div>
<div>
<span class="subject">cell phone:</span>
<span class="content">[phone]</span>
</div>

Answer 3

Please try this:
.subject{
width: 82px;
display: table-cell;
float: left;
}

Answer 4

You can make use of display table-row and table-cell to achieve this. Below code you can see that the width of the longest content is taken as the width if not it will take a min-width of 50px;
Hope this is what you are expecting :
.notifications_list{
margin-top: 1px;
padding-right: 15px;
direction: rtl;
overflow: scroll;
width: 100%;
height: 100%;
display: table;
}
.notifications_list div, .notifications_list ul{
display: table-row;
}
.notifications_list li{
list-style: none;
}
.notification_date_title{
font-size: 14px;
margin-top: 10px;
}
.note_icon{
}
.note_icon i{
font-size: 20px;
margin: 0px;
}
.note_type{
margin-right: 5px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="notifications_list">
<div class="notification_date_title">امروز +5</div>
<ul>
<li><a><div><span class="note_icon"><i class="fa fa-sort"></i></span><span class="note_type">رای</span><span class="note_date_time">2 ساعت قبل</span></div></a>
</li>
</ul>
<div class="notification_date_title">دیروز +10</div>
<ul>
<li><a><div><span class="note_icon"><i class="fa fa-sort"></i></span><span class="note_type">رای</span><span class="note_date_time">14 ساعت قبل</span></div></a>
</li>
</ul>
<div class="notification_date_title">در هفته گذشته </div>
<ul>
<li><a><div><span class="note_icon"><i class="fa fa-check"></i></span><span class="note_type">تایید جواب</span><span class="note_date_time">2 روز قبل</span></div></a>
</li>
<li><a><div><span class="note_icon"><i class="fa fa-sort"></i></span><span class="note_type">رای</span><span class="note_date_time">3 روز قبل</span></div></a>
</li>
</ul>
</div>

Answer 5

Try this also:
.subject{
width: 50%;
float:left;
}
.content{width: 50%;
float:right;
}
<div>
<span class = "subject">Name:</span>
<span class="content">John</span>
</div>
<div>
<span class = "subject">Age:</span>
<span class="content">23</span>
</div>
<div>
<span class="subject">cell phone:</span>
<span class="content">[phone]</span>
</div>