Как сделать вертикальную линию между словами?

.text {
    display: inline-block;
    
    padding: 5px 10px;
    
    font-size: 20px;
    
    border-right: 1px solid #d0d0d0;
}
.text:last-child {
    border-right: none;
}

<div>
    <div class = 'text'>текст 1</div>
    <div class = 'text'>текст 2</div>
</div>

.text {
    display: inline;
    
    padding: 0px 10px;
    
    font-size: 20px;
}
.vr {
    display: inline;
    height: 20px;
    margin: 10px;
    border-left: 2px solid #d0d0d0;
}

<div class = 'text'>текст 1</div>
<div class = 'vr'></div>
<div class = 'text'>текст 2</div>