How to align button with dropdown inline with other link anchor

January 4, 2022

`I want the drop-down menu to be aligned properly not to the left side of the screen. I want it responsive

.top-section{
   padding-top: 2rem;
}
.btn-search{
   background-color: #EEEFEE;
   border-radius: 0px !important;
}
.fa-search{
   color: #8E8F8F;
}
.form-control{
   border-radius: 0px !important;
}
.link-end{
   text-align: end;
   display: flex;
    justify-content: end;
    align-items: baseline;
}
.first-link{
   margin-right: 2rem;
}
@media (max-width:991px) {
   .link-end{
      padding-top: 2rem;
   }
}

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
   <!-- jQuery library -->
   <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
   <!-- Popper JS -->
   <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
   <!-- Latest compiled JavaScript -->
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script> 
   <script src="https://use.fontawesome.com/f1e10fbba5.js"></script> 
   <link rel="stylesheet" href="contact.css">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Print-Shop Contact</title>
</head>
<body>
   <div class="top-section">
      <div class="col-lg-12">
         <div class="row">
            <div class="col-lg-4 col-12">
               <div class="input-group">
                  <input type="text" class="form-control">
                  <div class="input-group-append">
                    <button class="btn btn-search" type="button">
                      <i class="fa fa-search"></i>
                    </button>
                  </div>
                </div>
            </div>
           <!--Empty Div-->
           <div class="col-lg-4 d-md-block d-none"></div>
           <!--End of Empty Div-->
            <div class="col-lg-4 col-12">
               <div class="link-end">
                  <a href="#" class="first-link">Help</a>
                  <div class="dropdown">
                     <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                       Action
                     </button>
                     <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                       <a class="dropdown-item" href="#">Action</a>
                       <a class="dropdown-item" href="#">Another action</a>
                       <a class="dropdown-item" href="#">Something else here</a>
                     </div>
                   </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</body>
</html>

I want the dropdown menu to be responsible. It only got irresponsible when I align both to inline. I want the drop-down menu to be aligned properly not to the left side of the screen. I want it responsive

>Solution :

To test the grid structure, I removed the styles that added margin and padding to the elements. Then I updated the columns for responsive design; see the reference document for the grid system to be displayed differently in different browser sizes.

.btn-search {
  background-color: #EEEFEE;
}

.fa-search {
  color: #8E8F8F;
}

.link-end {
  text-align: end;
  display: flex;
  justify-content: end;
  align-items: baseline;
}

.first-link {
 margin-right: 10px;
}

.customDropdownStyle{
  margin-right: 110px;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script> 
    <script src="https://use.fontawesome.com/f1e10fbba5.js"></script> 
    <link rel="stylesheet" href="contact.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Print-Shop Contact</title>
  </head>
  <body>
    <div class="top-section">
      <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-4 col-4">
          <div class="input-group">
            <input type="text" class="form-control">
            <div class="input-group-append">
              <button class="btn btn-search" type="button">
                <i class="fa fa-search"></i>
              </button>
            </div>
          </div>
        </div>
        
        <div class="col-lg-4 col-md-4 col-sm-4 col-4"></div>
        
        <div class="col-lg-4 col-md-4 col-sm-4 col-4">
          <div class="link-end">
            <a href="#" class="first-link">Help</a>
            
            <div class="dropdown customDropdownStyle">
              <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action </button>
              <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>