Check out my code snippet where I've defined two Bootstrap cards:
<div id="detailPanel" class="col-lg-12">
<div class="col-lg-12">
<div class="card">
<div class="col-lg-6">
<div class="card-header">
<div>
Detail
@if (@Model.ProjectId != default(int))
{
<text>- Project #</text>
@Model.ProjectId
}
</div>
</div>
<div class="card-body">
@*Custom fields*@
<div class="editor-label">@*Custom fields*@</div>
<div class="editor-field wide-editor">
@*Custom fields*@
<button id="showChooser" class="icon-button-sm">
<span class="fas fa-search"></span>
</button> <span id="description"></span>
@*Custom fields*@
</div>
</div>
</div>
</div>
<div class="card">
<div class="col-lg-6">
<div class="card-header">
<p>Financials</p>
</div>
<div class="card-body">
@*Custom fields*@
<div id="purchPanel">
@*Custom field*@
<div id="realEstatePanel">
@*Custom fields*@
</div>
<div class="editor-label">@Html.LabelFor(model => model.PurchasePrice, "Purchase Price")</div>
<div class="editor-field">
@Html.EditorFor(model => model.PurchasePrice)
<button id="realEstateToggle" class="k-button"></button>
@Html.ValidationMessageFor(model => model.PurchasePrice)
</div>
</div>
<div id="refiPanel">@Html.EditorEntryFor(model => model.RefinanceAmount, "")</div>
<div class="editor-field" id="equityAssetPanel">
@Html.EditorFor(model => model.EquityAssetId)
@Html.ValidationMessageFor(model => model.EquityAssetId)
</div>
</div>
</div>
</div>
</div>
</div>
Here is how the page currently looks like:https://i.sstatic.net/WsRbD.jpg
I'm aiming to align them side by side, similar to the example shown on the official documentation here: https://getbootstrap.com/docs/4.0/components/card/