how to can align a two Divs with each others?

December 28, 2021

I am trying to make a multiple image upload with preview but on a design problem as you see on the code snipped.
The problem is that the add image div doesn’t get aligned with the images.
hope you can help me find the issue.

Codepen

.gallery{
    background-color: #fbfbfb;
    border-radius: 5px;
    border-style: solid;
    border: 1px solid #bbbbbb;
    height: 85px;
    line-height: 1;
    box-sizing: border-box;
    margin: 12px;
    height: auto;
}
input[type="file"] {
    display: none;
}
.images-upload {
    background-color: #ffffff;
    border-radius: 5px;
    border: 1px dashed #ccc;
    display: inline-block;
    padding: 3px;
    cursor: pointer;
    width: 165px;
    height: 85px;
}
.images-preview {
    border-radius: 5px;
    border: 1px solid #ccc;
    display: inline-block;
    width: 140px;
    height: 80px;
    padding-top: -14px;
}
.button-container{
    display: inline-flex;
    height: 90px;
    width: 140px;
}
.image-container{
    display: inline-table;
    height: 90px;
    width: 140px;

}
.custum-icon{

    
    color: #00afca;
}
.close-btn{
    background: none;
    color: white;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
    position: relative;
    left: -136px;
    top: -15px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    width: 0px;

}
.close-btn:hover{
    color: red;
    box-shadow: red 0px 7px 29px 0px;
}

.m-0 {
margin: 0 !important;
}
.w-100 {
width: 100% !important;
}
.border-danger {
border-color: #dc3545 !important;
}
.mx-1 {
margin-right: 0.25rem !important;
margin-left: 0.25rem !important;
}
.p-3 {
padding: 1rem !important;
}
.text-center {
text-align: center !important;
}
.m-1 {
margin-top: 0.25rem !important;
}

.container {
  margin-right: 3rem;
  margin-left: 3rem;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./assets/css/style.css" class="href">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <!-- https://animate.style   cdn -->
    <link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
    <title>DROP</title>
</head>
<body>
    <!--CONATAINER DIV-->
    <div class="container">
        <!--GALLERY AREA TEST WITH 1 IMAGE-->
        <div class="gallery w-100 m-2" >
            <div class="p-3">

                <!--UPLOAD BUTTON-->
                <div class="button-container ">
                    <label for="images-upload" class="images-upload text-center">
                        <i class=" fas fa-plus-circle fa-3x custum-icon " style=" transform: translateY(+31%);"></i>
                    </label>     
                    <input id="images-upload" type="file" name="images" multiple="multiple">
                </div> 

                <!--IMAGES PREVIEW-->
                
                <div class="image-container">
                    <img src="https://cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171_960_720.jpg" alt=""  class="images-preview">
                    <button class="close-btn "> <i class="fas  fa-2x fa-times"></i></button>
                </div> 
                <div class="image-container my-1 ">
                    <img src="https://cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171_960_720.jpg" alt=""  class="images-preview">
                    <button class="close-btn "> <i class="fas  fa-2x fa-times"></i></button>
                </div> 
                
                
            </div>
        </div>
    </div>

</html>

>Solution :

I created two classes d-flex and gap10, and adjusted the height of images-preview to 90px in your CSS.
Then I added those 2 classes in your html div above 

.gallery {
  background-color: #fbfbfb;
  border-radius: 5px;
  border-style: solid;
  border: 1px solid #bbbbbb;
  height: 85px;
  line-height: 1;
  box-sizing: border-box;
  margin: 12px;
  height: auto;
}

input[type="file"] {
  display: none;
}

.images-upload {
  background-color: #ffffff;
  border-radius: 5px;
  border: 1px dashed #ccc;
  display: inline-block;
  padding: 3px;
  cursor: pointer;
  width: 165px;
  height: 85px;
}

.images-preview {
  border-radius: 5px;
  border: 1px solid #ccc;
  display: inline-block;
  width: 140px;
  height: 90px;
  padding-top: -14px;
}

.button-container {
  display: inline-flex;
  height: 90px;
  width: 140px;
}

.image-container {
  display: inline-table;
  height: 90px;
  width: 140px;
}

.custum-icon {
  color: #00afca;
}

.close-btn {
  background: none;
  color: white;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
  position: relative;
  left: -136px;
  top: -15px;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  width: 0px;
}

.close-btn:hover {
  color: red;
  box-shadow: red 0px 7px 29px 0px;
}

.m-0 {
  margin: 0 !important;
}

.w-100 {
  width: 100% !important;
}

.border-danger {
  border-color: #dc3545 !important;
}

.mx-1 {
  margin-right: 0.25rem !important;
  margin-left: 0.25rem !important;
}

.p-3 {
  padding: 1rem !important;
}

.text-center {
  text-align: center !important;
}

.m-1 {
  margin-top: 0.25rem !important;
}

.container {
  margin-right: 3rem;
  margin-left: 3rem;
}

.d-flex {
  display: flex;
  flex-wrap: wrap;
}

.gap10 {
  gap: 10px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./assets/css/style.css" class="href">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer"
  />
  <!-- https://animate.style   cdn -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
  <title>DROP</title>
</head>

<body>
  <!--CONATAINER DIV-->
  <div class="container">
    <!--GALLERY AREA TEST WITH 1 IMAGE-->
    <div class="gallery w-100 m-2">
      <div class="p-3 d-flex gap10">

        <!--UPLOAD BUTTON-->
        <div class="button-container ">
          <label for="images-upload" class="images-upload text-center">
                        <i class=" fas fa-plus-circle fa-3x custum-icon " style=" transform: translateY(+31%);"></i>
                    </label>
          <input id="images-upload" type="file" name="images" multiple="multiple">
        </div>

        <!--IMAGES PREVIEW-->

        <div class="image-container">
          <img src="https://cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171_960_720.jpg" alt="" class="images-preview">
          <button class="close-btn "> <i class="fas  fa-2x fa-times"></i></button>
        </div>
        <div class="image-container my-1 ">
          <img src="https://cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171_960_720.jpg" alt="" class="images-preview">
          <button class="close-btn "> <i class="fas  fa-2x fa-times"></i></button>
        </div>


      </div>
    </div>
  </div>

</html>

You shouldn’t use inline styling such as style="display:flex;", because it can really mess up things in the long run. If you want to get rid of the gap, just delete the class from HTML & CSS. For compatibility, check this.