I'm struggling with formatting this card. My goal is to create two columns, one with the class col-xs-3 and the other with the class col-xs-9. The titles in the col-xs-3 column should align with the corresponding titles in the col-xs-9 column.
Unfortunately, I haven't been able to achieve this layout yet.
Here is a snippet of my current card layout. Can someone assist me with this issue?
.detail-titles {
color: blue;
border-right: 1px solid red;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-lg-12 col-xl-12 ">
<div class="card">
<div class="card-body">
<div class="container">
<div class="row">
<div class="col-xs-3 detail-titles">
<p>1 title</p>
<p>2 title</p>
<p>3 title</p>
<p>4 text</p>
</div>
</div>
<div class="row">
<div class="col-xs-9 text-right">
<p>1 title-match</p>
<p>2 title-match</p>
<p>3 title-match</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis accumsan, enim vel condimentum tristique, est lacus placerat risus, sed luctus nulla metus vitae eros. Vivamus dictum aliquam mauris eget consequat. Proin nec lorem a nisi tristique
porta vitae vel quam. Sed est nisi, aliquam eu ligula sit amet, pulvinar finibus est. Curabitur lectus augue, fermentum et mauris eget, hendrerit sollicitudin nisi. Morbi in lacus ac sapien malesuada commodo ut a lectus. Integer at diam
convallis, molestie sem sit amet, gravida lorem. Fusce sagittis ornare dui. Maecenas at vestibulum lorem, in sodales tellus. Nunc sed urna in nunc gravida fermentum id non diam. Mauris porttitor nisl sed quam commodo, sit amet ultrices dolor
gravida. Donec imperdiet venenatis dui sit amet condimentum. Morbi vel nisi pellentesque, vulputate nibh a, ornare sem. Pellentesque tempus nisl quis rutrum hendrerit. Praesent eget massa nisl. Vestibulum elit tortor, mollis vitae orci eget,
vestibulum iaculis sapien. Sed vulputate risus vel lectus congue, sit amet dapibus arcu commodo.</p>
</div>
</div>
</div>
</div>
</div>
</div>