Put a div next to an image not under - html

Question

I am using Bootstrap and I have an image, and I want to have the card on the right of the image, but it is at the bottom.
I tried using display: inline-block, but that did not work. I looked at the other answers on the site and they did not work for me either, so please don't recommend those.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<h1 style="text-align: center; font-size: 70px; ">Crabapple Lake Parc</h1>
<img src="https://th.bing.com/th/id/R.bb60507b5a1f567e6b6592f375bf5e8d?rik=FgkA6Taf%2fHwJsA&pid=ImgRaw&r=0" alt="Group Picture" style="display: block; margin-left: auto; margin-right: auto; width: 50%;">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Have Questions?</h5>
FAQ
Contact Us
</div>
</div>

Answer 1

To have a card next to the image using Bootstrap, you can use the grid system. In the code below, the col-md-4 class is used to specify that the image will take up four columns out of a possible twelve, and the col-md-8 class is used to specify that the card will take up the remaining eight columns. If you find that the card is appearing below the image, it may be because the image is too wide for the column. To fix this, you can add the img-fluid class to the image to ensure that it is responsive and will fit within the column.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<h1 style="text-align: center; font-size: 70px; ">Crabapple Lake Parc</h1>
<div class="container">
<div class="row">
<div class="col-md-4">
<img src="https://th.bing.com/th/id/R.bb60507b5a1f567e6b6592f375bf5e8d?rik=FgkA6Taf%2fHwJsA&pid=ImgRaw&r=0" class="img-fluid" alt="Group Picture">
</div>
<div class="col-md-8">
<div class="card">
<div class="card-body">
<h5 class="card-title">Have Questions?</h5>
FAQ
Contact Us
</div>
</div>
</div>
</div>
</div>

Answer 2

<h1 style="text-align: center; font-size: 70px;">Crabapple Lake Parc</h1>
<div class="row">
<div class="col-md-6">
<img src="https://th.bing.com/th/id/R.bb60507b5a1f567e6b6592f375bf5e8d?rik=FgkA6Taf%2fHwJsA&pid=ImgRaw&r=0" alt="Group Picture" style="display: block; margin-left: auto; margin-right: auto; width: 100%;">
</div>
<div class="col-md-6">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Have Questions?</h5>
FAQ
Contact Us
</div>
</div>
</div>
</div>

Answer 3

In your parent element you can use these styles
display: flex;
justify-content: space-between;
Or in Bootstrap: d-flex and justify-content-between classes:
<div class="d-flex justify-content-between">
<h1 style="text-align: center; font-size: 70px; ">Crabapple Lake Parc</h1>
<img src="https://th.bing.com/th/id/R.bb60507b5a1f567e6b6592f375bf5e8d?rik=FgkA6Taf%2fHwJsA&pid=ImgRaw&r=0" alt="Group Picture" style="display: block; margin-left: auto; margin-right: auto; width: 50%;">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Have Questions?</h5>
FAQ
Contact Us
</div>
</div>
</div>
WITH TITLE IN THE TOP:
<h1 style="text-align: center; font-size: 70px; ">Crabapple Lake Parc</h1>
<div class="d-flex justify-content-between">
<img src="https://th.bing.com/th/id/R.bb60507b5a1f567e6b6592f375bf5e8d?rik=FgkA6Taf%2fHwJsA&pid=ImgRaw&r=0" alt="Group Picture" style="display: block; margin-left: auto; margin-right: auto; width: 50%;">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Have Questions?</h5>
FAQ
Contact Us
</div>
</div>
</div>

Answer 4

You could* use .d-inline-block if it is appropriate for your layout. You need to use it on both the img and the .card.
*I'm not necessarily recommending this, but it does what you ask.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<h1 style="text-align: center; font-size: 70px; ">Crabapple Lake Parc</h1>
<img class="d-inline-block w-50" src="https://th.bing.com/th/id/R.bb60507b5a1f567e6b6592f375bf5e8d?rik=FgkA6Taf%2fHwJsA&pid=ImgRaw&r=0" alt="Group Picture">
<div class="card d-inline-block" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Have Questions?</h5>
FAQ
Contact Us
</div>
</div>