how do i make image and image select and delete buttons reponsive

I want to remove the gap after delete button, any suggestion will be appreciated??

 <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.stack.imgur.com/uhJhl.png