I am currently utilizing bootstrap in my project and facing an issue with collapsibles. I want them to be displayed on the same line, but when I expand the first one, the second collapsible moves down into the space of the first one.
Here is how I have structured my two collapsibles:
<div class="row">
<div class="container">
<h2>Nerve Cuffs</h2>
<hr>
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#2-Channel">2-Channel Nerve Cuffs <i class="fas fa-angle-down"></i></button>
<div id="2-Channel" class="collapse">
<div class="row">
<div class="col-6">
<h4>NC-630-2</h4>
</div>
</div>
<h5><span class="badge badge-secondary">2-Channel</span></h5>
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#1">Specifications <i class="fas fa-angle-down"></i></button>
<div id="1" class="collapse">
<p>Electrode Length: 0.630mm <br>
Electrode Width: 0.150m <br>
Electrode Area: 0.095 mm<sup>2</sup> <br>
Electrode Sites: 2 <br>
Electrode Spacing: 1.000m
</p>
<p>Device Length: 5.000m <br>
Device Width: 2.00mm <br>
Device Thickness: 30 ± 5 μm
</p>
<p>
Standard Electrode Material: TiN <br>
Connector Options: Bare wires, Plastics One, Omnetics
</p>
</div>>
...
<p>Standard Electrode Material: TiN <br>
Connector Options: Bar...
</div>
</div>
</div>
If anyone has any suggestions or solutions, I would greatly appreciate it!