How can I make the image and image select and delete buttons responsive?
I am looking to eliminate the gap after the delete button. Any suggestions are welcomed.
<div class="container mt-0">
<div class="row">
<div class="col-sm-12 col-md-3"><!--upload button-->
<a href="" class="mb-2 btn btn-outline-primary w-100 " onclick="javascript:windowOpen('@(uploadURL)?backAction=menuform&detailId=1&objId=@imageElementId&pathId=@hiddenElementId', 'menuUpload'); return false;"><span class=""></span>@wordInfo["SelectImage"]</a>
</div>
<div class="col-sm-12 col-md-3 ms-md-5"><!--delete button-->
<button type="submit" class="btn btn-outline-primary float-lg-end mb-2 w-100 " id="@removeImageElementId" style="@(String.IsNullOrEmpty(Model.MenuForm.IMAGE_NAME) ? "display:none" : "")" onclick="javascript:removeImage('@(noImage)', '@imageElementId', '@hiddenElementId', '@removeImageElementId'); return false;"><span class=""></span>Delete image</button>
</div>
</div>
</div>
<div class="row mb-3 d-flex flex-column"><<!---image-->>
<div class="col-md-7 mt-3">
<img id="@imageElementId" class="img-fluid" alt="Responsive image" src="@(String.IsNullOrEmpty(Model.MenuForm.IMAGE_NAME) ? noImage : menuImagePath + Model.MenuForm.IMAGE_NAME)" onload="javascript:disiplayImage('@removeImageElementId', $(this).attr('src'),'@noImage') " />
<input type="hidden" id="@hiddenElementId" name="hdnImageName_1" value="@Model.MenuForm.IMAGE_NAME">
</div>
</div>
</div>
[![below is image][1]][1]
[1]: https://i.sstatic.net/uhJhl.png