Bootstrap collapsible panel on side - css

Question

The accordion panel looks like this
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
This is some content.
</div>
</div>
The content is displayed below the button.
How do I move the collapse panel to the right side of the button? As shown below

Answer 1

if you are using bootstrap then do it in proper way, using rows and cols. This way you will get responsive layout too.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<div class="row">
<div class="col-auto">
<a class="btn btn-primary btn-block" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
</div>
<div class="col">
<div class="collapse" id="collapseExample">
<div class="card card-body">
This is some content.
</div>
</div>
</div>
</div>

Answer 2

You can wrap this in a div and give class d-flex and give flex-grow-1 to collapse
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<div class="d-flex">
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
</p>
<div class="collapse flex-grow-1" id="collapseExample">
<div class="card card-body">
This is some content.
</div>
</div>
</div>