When working within a Bootstrap Card, I am trying to position the image to the right of the title and text, but it currently appears below them. How can I make the image align all the way to the right of the screen, next to the title and text?
HTML:
<div class="card bg-transparent border-0 text-white mb-3" >
<div class="row g-0">
<div class="col-md-6">
<div class="card-body">
<h5 class="card-title">Lorem title</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
<div class="col-md-6">
<img src="../assets/images/cp/sobre-cid-2.jpg" class="img-fluid rounded-start" alt="cid-2">
</div>
</div>
CSS:
.img-fluid.rounded-start {
height: calc(120px + 10vw);
width: 90vw;
border-radius: 30px 0px 0px 30px;
object-fit: cover;
}
.card-title {
font-family: Martel;
font-size: 20px;
padding: 20px;
text-align: left;
}
.card-text {
font-family: Martel;
font-size: 15px;
padding-left: 20px;
padding-right: 30px;
text-align: left;
}
https://i.sstatic.net/k8CF1.png
I attempted to use float-right in the class and CSS, but it had no effect on the positioning.