On larger screens, everything displays correctly. However, when viewing on a phone, the issue arises. I want these two columns to always stay on one row, but currently they stack on mobile devices. How can I ensure that they resize and remain on the same row regardless of screen size? Specifically, I want the first column (left) to be the one that resizes.
<div class="container">
<div class="row">
<div class="col-lg-8">
<div class="form-group mb-3">
<label asp-for=Title></label>
<input readonly class="form-control form-control-lg" asp-for=Title placeholder="Title"/>
</div>
<div class="form-group mb-3">
<label asp-for=Description></label>
<textarea readonly class="form-control" asp-for=Description rows="3"></textarea>
</div>
<div class="form-group mb-3">
<label asp-for=Price></label>
<input readonly class="form-control" asp-for=Price/>
</div>
<div class="form-group mb-3">
<label asp-for=Location></label>
<input readonly class="form-control" asp-for=Location/>
</div>
<div class="form-group mb-3">
<label asp-for="CategoryName"></label>
<input readonly class="form-control" asp-for="CategoryName" />
</div>
<div class="form-group mb-3">
<label asp-for="DateCreatedOn"></label>
<input readonly class="form-control" asp-for="DateCreatedOn" />
</div>
</div>
<div class="col-lg-4">
<div class="container">
<div class="card border border-primary rounded p-0 mb-3 mx-1">
<div class="card-body">
<img id="image1" src="@profilePictureSrc" class="card-img">
</div>
<div class="card-footer text-center">
<input readonly class="form-control text-center" asp-for="UserName"/>
</div>
</div>
</div>
</div>
</div>
</div>