CSS текст с рамкой справа

Question

Мне нужна помощь, чтобы сделать вертикальную линию между названием абзаца, улицей, почтовым отправлением, электронной почтой и оргн.Я понимаю, что мне нужно сделать border-right и, возможно, создать div, чтобы получить правильные поля.

Я хочу сохранить то же поведение, что и сейчас на css, но не знаю как.Я пытался с divs, но это не выглядело хорошо.

.footer_contact {
    background-color: #f8f8f8;
    bottom: 0;
    width: 100%;
    padding-top: 30px;
    padding-bottom: 30px;
    font-size: 18px;
    line-height: 28px;
    margin-top: 79px;
}

.footer_contact p {
    font-size: 18px;
    letter-spacing: 0.050em;
    display: inline;
    font-weight: 500;
    margin-right: 35px;
}

.footer_contact ul {
	font-size: 12px;
	list-style: none;

}

.footer_contact ul li {
	float: right;
}

.footer_contact a {
	color: #3c273a;
    text-decoration: none;
    margin-right: 77px;
}

<div class="footer_contact">
    <div class="grid_medium_footer">
        <nav class="footer_icons">
            <ul class="social_icons">
                <li><a href="#" class="social_instagram">Instragram<i class="fa fa-instagram" aria-hidden="true"></i></a></li>
                <li><a href="#" class="social_facebook">Facebook<i class="fa fa-facebook" aria-hidden="true"></i></a></li>
                <li><a href="#" class="social_linkedin">Linkedin<i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
                <li><a href="#" class="social_twitter">Twitter<i class="fa fa-twitter" aria-hidden="true"></i></a></li>
            </ul>
        </nav> 
        <p>Name</p>
        <p>Street</p>
        <p>Postal</p>
        <p>Email</p><br>
        <p>Orgnr</p>
    </div>
</div> <!-- grid_medium_footer -->

Answer 1

.footer_contact p{
    display:inline;
    padding: 0 2%;
    line-height: 2em;
    border-right: 1px solid gray;
    font-size: 18px;
    font-weight: 500;
    margin-right: 5px;
    letter-spacing: 0.050em;
}

Answer 2

Я сделал некоторые изменения в вашем коде, надеюсь, это поможет

.footer_contact {
	
    background-color: #f8f8f8;
    bottom: 0;
    width: 100%;
    padding-top: 30px;
    padding-bottom: 30px;
    font-size: 18px;
    line-height: 28px;
    margin-top: 79px;
}


.footer_contact p {
    font-size: 18px;
    letter-spacing: 0.050em;
    display: inline;
    font-weight: 500;
	width:100px;
	text-align: center;
}


.footer_contact ul {
	font-size: 12px;
	list-style: none;
	
}

.footer_contact ul li {
    float: left;
    border-left: 1px solid #ddd;
    text-align: center;
}
.footer_contact ul li:first-child {
    border-left: 0;
}
.footer_contact a {
    color: #3c273a;
    text-decoration: none;
    width: 120px;
    display: inline-block;
}

	<div class="footer_contact">
		<div class="grid_medium_footer">
			
			 <nav class="footer_icons">
			            <ul class="social_icons">
			              <li><a href="#" class="social_instagram">Instragram<i class="fa fa-instagram" aria-hidden="true"></i></a></li>
			              <li><a href="#" class="social_facebook">Facebook<i class="fa fa-facebook" aria-hidden="true"></i></a></li>
			              <li><a href="#" class="social_linkedin">Linkedin<i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
			              <li><a href="#" class="social_twitter">Twitter<i class="fa fa-twitter" aria-hidden="true"></i></a></li>
			            </ul>
	     			</nav> 
	     <div>       			
		 
	     <p>Name</p>
	     <p>Street</p>
	     <p>Postal</p>
	     <p>Email</p><br>
	     <p>Orgnr</p>
	   </div>
	   </div>   
			
		
	</div> <!-- grid_medium_footer -->

Answer 3

Вы имеете в виду, как это?В противном случае, пожалуйста, будьте более конкретны.

.footer_contact p {
    font-size: 18px;
    letter-spacing: 0.050em;
    display: inline;
    font-weight: 500;
    margin-right: 2%;
    padding-right: 2%;
    border-right: 1px solid #dddddd;
}