is there any way element overflow its parent - css

Question

i want to overflow an element its parent context in css(bootstrap). is there any way ?
in my case code is below. I want the description fields to cover the whole row. but its in col-md-4 therefore not cover. Is there a way to do what i want. My English is bad, I'm sorry.
Edit:
the design i want to make
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
item 1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="panel" aria-labelledby="headingOne">
<div class="panel-body">
Description 1
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
item 2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="panel" aria-labelledby="headingTwo">
<div class="panel-body">
description 2
</div>
</div>
</div>
</div>
</div>

Answer 1

I think you have to separate description (panel content) and put it below the tabs (headings)
And after all I think in this case you need Bootstrap's accordion approach
Try this out:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true"
aria-controls="collapseOne">
item 1
</a>
</h4>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"
aria-expanded="false" aria-controls="collapseTwo">
item 2
</a>
</h4>
</div>
</div>
</div>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="panel" aria-labelledby="headingOne">
<div class="panel-body">
Description 1
</div>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="panel" aria-labelledby="headingTwo">
<div class="panel-body">
description 2
</div>
</div>