包装到手机上的单独行

Question

我有以下完美呈现在桌面上的代码。但是，在移动设备上，黄色按钮会降到文本框下方的行-如下图所示

我想在同一行上有文本框及其对应的按钮。

赞：

文本框按钮
文本框按钮

我该怎么办？

<div class="row">      
<div class="col-md-5"> 
 <br>
<form action="/search/" name="form1" ,="" id="form1" method="post">
 <input type="hidden" name="csrfmiddlewaretoken" value="StMqNWCyEn1wkST0HAZmJTUfZNo9OmefQl9ZWF4WQ5c0R0OaDdkBJ4sWy0MU0wyv">
<input type="text" name="search" class="form-control form-control-sm" id="taskid" aria-describedby="emailHelp" placeholder="Search For Tasks">
</form></div>
<div class="col-md-1"> 
<br> 
<button type="submit" name="add" class="btn btn-warning btn-sm"><i class="fas fa-search"></i></button>
</div>


<div class="col-md-5"> 
<br>
    <form action="/project/" name="form1" ,="" id="form1" method="post">

 <input type="hidden" name="csrfmiddlewaretoken" value="StMqNWCyEn1wkST0HAZmJTUfZNo9OmefQl9ZWF4WQ5c0R0OaDdkBJ4sWy0MU0wyv">
 <input type="text" name="project" class="form-control form-control-sm" id="taskid" aria-describedby="emailHelp" placeholder="Search Projects">
</form></div>
<div class="col-md-1">  
  <br>
<button type="submit" name="searchproject" class="btn btn-warning btn-sm"><i class="fas fa-search"></i></button>
   </div>

</div>