如何使2个div彼此相邻

Question

问题是，当我尝试使用display:inline进行分类时，第一个div的底部现在是第二个div的顶部，有什么办法可以解决此问题。我尝试添加页边距，但这无济于事

div#test1 {
  font-family: 'Montserrat', sans-serif;
  height: 300px;
  width: 300px;
  margin-left: 30px;
  font-size: 20px;
  text-align: left;
}

p#test2 {
  font-size: 40px;
  margin-bottom: 15px;
}

a#View_more1 {
  text-decoration: none;
  padding: 10px 20px;
  font-family: sans-serif;
  background-color: black;
  color: white;
}

i {
  padding-bottom: 1000px;
  background-color: gray;
  border-radius: 50%;
  border: 1px solid grey;
  padding: 10px;
}

div#div02 {
  height: 300px;
  width: 300px;
  background-color: green;
  margin-bottom: 500px;
}

<div>
  <div id="test1" style="display:inline-block">
    <p id="test2">fdhsbfs</p>
    <p>bhdusfsbhjhfjh h gsdbh bbs dhgfshfusdgsv</p><br>
    <a href="#" id="View_more1">View More</a>
  </div>
  <div id="div02" style="display:inline-block">
    <i class="fas fa-desktop"></i>
  </div>