We Keep Coding

i need help to put 3 boxes in one line

I am working on simple HTML web but I am stuck on something like 3 boxes I want accordingly in one line you can check the screenshot of example for that how I want I tried many times to do by every way but I failed to solve or sort out this issue kindly please help me in that
see this screenshot how it showing
Here is the screenshot of the example
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="property-wrap mb-2 row no-gutter" id="pp">
<div class="col-md-4 col-sm-20">
<div class="ppt-list list-vw mb-30 featured" style="cursor: pointer" onclick="window.location.href='https://supershop.ng/smart1'">
<figure id="mfs">
<!-- <span class="tag left text-uppercase bg-dark">$5,70,0000</span>
<span class="tag right text-uppercase primary-bg">for rent</span> -->
<a href="https://supershop.ng/smart1" class="image-effect overlay">
<img src="assets/images/smart1-logo.svg" alt="" style="width: 100px; height: 100px; border-radius: 100px;" id="mis">
</a>
</figure>
<!--fig-->
<div class="content" id="mcs">
<h4 class="mb-0">SuperShopper</h4>
<div class="mb-15">
<p>Lekki Phase 1, Lekki</p>
</div>
</div>
<!--content-->
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="ppt-list list-vw mb-30 featured" style="cursor: pointer" onclick="window.location.href='https://supershop.ng/green_way'">
<figure id="mfs">
<!-- <span class="tag left text-uppercase bg-dark">$5,70,0000</span>
<span class="tag right text-uppercase primary-bg">for rent</span> -->
<a href="https://supershop.ng/green_way" class="image-effect overlay">
<img src="assets/images/green_way.png" alt="" style="width: 100px; height: 100px; border-radius: 100px;" id="mis">
</a>
</figure>
<!--fig-->
<div class="content" id="mcs">
<h4 class="mb-0">GreenWay Supermarket</h4>
<div class="mb-15">
<p>142 Lekki - Epe Expressway, Beside Monarch Event Center, Lekki</p>
</div>
</div>
<!--content-->
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="ppt-list list-vw mb-30 featured" style="cursor: pointer" onclick="window.location.href='https://supershop.ng/pjv1'">
<figure id="mfs">
<!-- <span class="tag left text-uppercase bg-dark">$5,70,0000</span>
<span class="tag right text-uppercase bg-blue">for sale</span> -->
<a href="#" class="image-effect overlay">
<img src="assets/images/pjv.png" alt="" style="width: 100px; height: 100px; border-radius: 0px;" id="mis">
</a>
</figure>
<!--fig-->
<div class="content" id="mcs">
<h4 class="mb-0">PJV Supermarket</h4>
<div class="mb-15">
<p>36b Kusenla Road, Ikate Elegushi, Lekki</p>
</div>
<!--content-->
</div>
<!--content-->
</div>
</div>

.closest() not working when looking for H3

I'm looking to find the value of the H3 within this block of text, onclick. I have tried the closest method but it's not working. I'd love to know what I'm doing wrong.
$(document).on('click', '.companyBtn', function() {
var ha = $(this).closest('.testTitle').val();
alert(ha);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="col-lg-12 col-sm-6 companyBtn" id="3543">
<div class="strip">
<div class="row">
<div class="col-2">
<img class="img-fluid rounded-circle d-inline pr-2" style="max-width: 50px" src="/members/images/3543.jpg">
</div>
<div class="col-10">
<div class="strip_info seenIcon">
<div class="item_title">
<h3 class="testTitle" style="width:90%;font-size:1.1rem">Test Company</h3>
<small class="d-block mb-3"> <span class="flag-icon flag-icon-gb"></span> United Kingdom</small>
<small class="badge badge-warning">Artist Managers</small>
</div>
</div>
</div>
</div>
</div>
</div>

The .closest() method looks for ancestors of the current node, and h3 is a descendant of .testTitle. Replace .closest() with .find(), which looks for descendants, and get the text content with .text():
$(document).on('click', '.companyBtn', function() {
var ha = $(this).find('.testTitle').text();
console.log(ha);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="col-lg-12 col-sm-6 companyBtn" id="3543">
<div class="strip">
<div class="row">
<div class="col-2">
<img class="img-fluid rounded-circle d-inline pr-2" style="max-width: 50px" src="https://i.picsum.photos/id/400/100/100.jpg?hmac=pvDsAYmMO0rcZJDGuhmCPDrPeCkJIkGR90-rqPYCMmw">
</div>
<div class="col-10">
<div class="strip_info seenIcon">
<div class="item_title">
<h3 class="testTitle" style="width:90%;font-size:1.1rem">Test Company</h3>
<small class="d-block mb-3"> <span class="flag-icon flag-icon-gb"></span> United Kingdom</small>
<small class="badge badge-warning">Artist Managers</small>
</div>
</div>
</div>
</div>
</div>
</div>

JQuery $(document).on("click") on mobile

I've made some research already online but I can't find any solution to my problem:
I've a web app which is using JQuery and bootstrap, on desktop is working as intended but when I try it on mobile (on Android I've tried Chrome an Brave) but it doesn't work on a single tap on the button but to trigger it need to long press until animation is finished
Here the front-end part and JQuery code:
$(document).on("click ", "#triggerCena", function(e) {
e.preventDefault();
$('#dettaglioCena').slideToggle("fast", function() {
delay = 0;
$('#dettaglioCena .cibo').each(function() {
if (!$(this).hasClass('animate__animated animate__bounceInLeft')) {
delay += 0.02;
$(this).css("animation-delay", delay + "s");
$(this).addClass('animate__animated animate__bounceInLeft');
$(this).css("visibility", "visible");
}
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row animate__animated animate__zoomInDown" style="margin:0px;margin-top:15px;margin-bottom:15px;animation-delay:1s;">
<div class="col-2">
<img class="mx-auto d-block rounded" width="62" height="50" src="images/pictures/img_community/cena.jpg">
</div>
<div class="col-7">
<h1 style="color:white;margin-left:15px;font-size:20px;">Cena</h1>
</div>
<div class="col-1">
</div>
<div class="col-1" style="margin-right:10px;">
<i class="fa fa-plus addMeal" style="color:white;font-size:20px;" data-toggle="modal" value="3" data-target="#modalAlimenti"></i>
</div>
</div>
<div class="row bg-light-grey animate__animated animate__zoomInDown" style="margin:0px;margin-bottom:0px;animation-delay:1s;">
<div class="col-1">
</div>
<div class="col-6">
<i style="color:black;">4 Voci</i>
</div>
<div class="col-3">
</div>
<div class="col-1">
<a class="fa fa-angle-down" style="color:black;" id="triggerCena" role="button"></a>
</div>
</div>
<div class="collapse" id="dettaglioCena" style="display: none;">
<div class="row bg-light-grey" id="175" style="margin:0px;"></div>
<div class="row bg-light-grey cibo animate__animated animate__bounceInLeft" id="176" style="margin: 0px; visibility: visible; animation-delay: 0.02s;">
<div class="col-4">
Grano saraceno </div>
<div class="col-3">
50 g </div>
<div class="col-3">
171 Kcal
</div>
<div class="col-2"><i class="fa fa-trash removeMeal" value="176"></i></div>
</div>
<div class="row bg-light-grey cibo animate__animated animate__bounceInLeft" id="177" style="margin: 0px; visibility: visible; animation-delay: 0.04s;">
<div class="col-4">
Coniglio </div>
<div class="col-3">
150 g </div>
<div class="col-3">
295 Kcal
</div>
<div class="col-2"><i class="fa fa-trash removeMeal" value="177"></i></div>
</div>
<div class="row bg-light-grey cibo animate__animated animate__bounceInLeft" id="178" style="margin: 0px; visibility: visible; animation-delay: 0.06s;">
<div class="col-4">
Broccoli </div>
<div class="col-3">
300 g </div>
<div class="col-3">
102 Kcal
</div>
<div class="col-2"><i class="fa fa-trash removeMeal" value="178"></i></div>
</div>
<div class="row bg-light-grey cibo animate__animated animate__bounceInLeft" id="179" style="margin: 0px; visibility: visible; animation-delay: 0.08s;">
<div class="col-4">
Olio di oliva </div>
<div class="col-3">
30 ml </div>
<div class="col-3">
265 Kcal
</div>
<div class="col-2"><i class="fa fa-trash removeMeal" value="179"></i></div>
</div>
</div>
I'm also using Animate.css to make animations.
I've already tried to add touchstart and touchend but nothing seems to change the behaviour.
Any help is very appreciated

Every tap comes with a delay, because it might be that someone is not really clicking but it's the start of a swipe, for example. This is why there's a delay and I think that's what you're talking about?
See here: https://developers.google.com/web/updates/2013/12/300ms-tap-delay-gone-away

how to float divs when using search filter bootstrap

I have created a gallery that gets filtered two ways. One by click of a button and the other with a search filter. Filters are working perfectly, except when divs are hidden on filter the remaining showing divs do not float next to each other.
this is what it looks like before filtered:
After filtering this is what it looks like:
How can I get it all of dancer2 to be next to each other and only start a new row every 4 dancers?
$(document).ready(function() {
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$(".column").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
.column {
float: right;
display: none;
/* Hide columns by default */
}
.content {
background-color: white;
padding: 10px;
text-align: center;
}
.show {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row container" style="margin: auto;">
<div class="col-sm-4">
<input type="text" id="myInput" placeholder="Search for names..">
</div>
<div class="col-sm-8" style="text-align: right;">
<div id="myBtnContainer" class="container" style="padding-bottom: 2rem;">
<button class="btn active" onclick="filterSelection('all')"> Show all</button>
<button class="btn" onclick="filterSelection('teachera')"> teachera</button>
<button class="btn" onclick="filterSelection('teacherb')"> teacherb</button>
<button class="btn" onclick="filterSelection('teacherc')"> teacherc</button>
</div>
</div>
</div>
<!--DANCER GALLERY-->
<div class="row container" style="margin: auto; margin-bottom: 2rem;">
<div class="col-sm-3 column teachera">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250" alt="Dancer1" style="width:80%; height: 200px;">
<h4>Dancer1</h4>
<p>teachera</p>
</div>
</a>
</div>
<div class="col-sm-3 column teachera">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250" alt="Dancer2" style="width:80%; height: 200px;">
<h4>Dancer2</h4>
<p>teachera</p>
</div>
</a>
</div>
<div class="col-sm-3 column teachera">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250" alt="Dancer3" style="width:80%; height: 200px;">
<h4>Dancer3</h4>
<p>teachera</p>
</div>
</a>
</div>
<div class="col-sm-3 column teachera">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250" alt="Dancer4" style="width:80%; height: 200px;">
<h4>Dancer4</h4>
<p>teachera</p>
</div>
</a>
</div>
</div>
<div class="row container" style="margin: auto; margin-bottom: 2rem;">
<div class="col-sm-3 column teacherb">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250/ff0000" alt="Dancer1a" style="width:80%; height: 200px;">
<h4>Dancer1</h4>
<p>teacherb</p>
</div>
</a>
</div>
<div class="col-sm-3 column teacherb">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250/ff0000" alt="Dancer2a" style="width:80%; height: 200px;">
<h4>Dancer2</h4>
<p>teacherb</p>
</div>
</a>
</div>
<div class="col-sm-3 column teacherb">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250/ff0000" alt="Dancer3a" style="width:80%; height: 200px;">
<h4>Dancer3</h4>
<p>teacherb</p>
</div>
</a>
</div>
<div class="col-sm-3 column teacherb">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250/ff0000" alt="Dancer4a" style="width:80%; height: 200px;">
<h4>Dancer4</h4>
<p>teacherb</p>
</div>
</a>
</div>
</div>
<div class="row container" style="margin: auto; margin-bottom: 2rem;">
<div class="col-sm-3 column teacherc">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250/ffff00" alt="Dancer1b" style="width:80%; height: 200px;">
<h4>Dancer1</h4>
<p>teacherc</p>
</div>
</a>
</div>
<div class="col-sm-3 column teacherc">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250/ffff00" alt="Dancer2b" style="width:80%; height: 200px;">
<h4>Dancer2</h4>
<p>teacherc</p>
</div>
</a>
</div>
<div class="col-sm-3 column teacherc">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250/ffff00" alt="Dancer3b" style="width:80%; height: 200px;">
<h4>Dancer3</h4>
<p>teacherc</p>
</div>
</a>
</div>
<div class="col-sm-3 column teacherc">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250/ffff00" alt="Dancer4b" style="width:80%; height: 200px;">
<h4 class="dancerName">Dancer4</h4>
<p>teacherc</p>
</div>
</a>
</div>
</div>

When you declare a new div with the "row" class it will start a new row. If you want all of those elements to show side-by-side, they should all be in the same "row" div. The bootstrap styles will automatically keep a maximum of 4 pictures side-by-side and wrap to a new row (because you have col-sm-3 as the class for the individual pictures). Bootstrap rows go up to 12 units long. Each time a new element is added, if it exceeds the 12, it will wrap to the next line.

Where is the overflow?

In the following code, I want the div named "buttons_wrapper" to scrolling when the size of the screen is smaller than all elements of the page, but doesn't work. I have an almost the same page but it works perfectly. What's the wrong with it?
Sorry for my bad english.
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.min.css">
<style>
body{
background-color: #bfbfbf;
overflow: hidden;
}
#buttons_wrapper{
margin: 0 auto;
padding: 25px 0 25px 0;
width: 100%;
overflow-x: hidden;
overflow-y: auto;
}
#ad_banner{
position: fixed;
overflow: hidden;
bottom: 0;
}
.top_bot_space{
margin-top: 10px;
margin-bottom: 10px;
}
.my-btn{
background-color: #000;
color: #00FFF6;
border-color: #00FFF6;
font-weight: bold;
}
.my-btn:hover{
background-color: #000;
color: #F82F5F;
border-color: #F82F5F;
}
</style>
</head>
<body>
<div id="logo">
<img src="images/logo.png" class="img-responsive" />
</div>
<div id="buttons_wrapper">
<div class='container text-center top_bot_space'>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 col-lg-offset-2 col-md-offset-2 col-sm-offset-2 col-xs-offset-2">
<a id="website" href="#" class="btn my-btn btn-lg btn-block"><i class="fa fa-lg fa-globe"></i> webpage</a>
</div>
</div>
<div class='container text-center top_bot_space'>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 col-lg-offset-2 col-md-offset-2 col-sm-offset-2 col-xs-offset-2">
<a id="website" href="#" class="btn my-btn btn-lg btn-block"><i class="fa fa-lg fa-globe"></i> webpage</a>
</div>
</div>
<div class='container text-center top_bot_space'>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 col-lg-offset-2 col-md-offset-2 col-sm-offset-2 col-xs-offset-2">
<a id="website" href="#" class="btn my-btn btn-lg btn-block"><i class="fa fa-lg fa-globe"></i> webpage</a>
</div>
</div>
<div class='container text-center top_bot_space'>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 col-lg-offset-2 col-md-offset-2 col-sm-offset-2 col-xs-offset-2">
<a id="website" href="#" class="btn my-btn btn-lg btn-block"><i class="fa fa-lg fa-globe"></i> webpage</a>
</div>
</div>
<div class='container text-center top_bot_space'>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 col-lg-offset-2 col-md-offset-2 col-sm-offset-2 col-xs-offset-2">
<a id="website" href="#" class="btn my-btn btn-lg btn-block"><i class="fa fa-lg fa-globe"></i> webpage</a>
</div>
</div>
<div class='container text-center top_bot_space'>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 col-lg-offset-2 col-md-offset-2 col-sm-offset-2 col-xs-offset-2">
<a id="website" href="#" class="btn my-btn btn-lg btn-block"><i class="fa fa-lg fa-globe"></i> webpage</a>
</div>
</div>
</div>
<div id="ad_banner">
<script type="text/javascript" src="somescript.js"></script>
</div>
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript">
var body_height = $("body").outerHeight();
var logo_height = $("#logo").outerHeight();
var ad_banner_height = $("#ad_banner").outerHeight();
var buttons_wrapper_height = body_height - logo_height - ad_banner_height;
$("#buttons_wrapper").css("height", buttons_wrapper_height + "px");
</script>
</body>

EDIT
Based on your additional explanation, a viewport-based height needs to be set on <body>, to avoid the body height being determined by its content. Like so:
body { height: 100vh; }
Updated Fiddle
Original Answer
The issue seems to be with vertical scroll, because you currently have overflow: hidden set on your <body>. So on a phone with a shorter screen, you wouldn't be able to scroll down. Change that to overflow-x: hidden if you'd like to keep preventing horizontal scroll, and you should be good.
Fiddle