为什么DIV会自己往下移动？

问题遇到的现象和发生背景

两个水平排放的div元素，第一个使用了属性overflow: hidden;第二个div的overflow属性为默认值，

现在出现的情况是：当一个div使用了overflow: hidden，第二个div元素就不会与第一个div处于同一个水平线上，而是自动往下平移了。

为什么当第一个DIV将overflow赋值为hidden;第二个DIV就会自己往下移动？

问题相关代码，请勿粘贴截图
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" />
    <title>Documenttitle>
    <style>
      .div1 {
        width: 40px;
        height: 20px;
    overflow: hidden;
    display: inline-block;
        background-color: red;
      } 
.div2 {
        width: 40px;
        height: 20px;
        display: inline-block;
        background-color: red;
      } 
    style>
  head>
  <body>
      <div class="div1">
         div1
        div>
        <div class="div2">
      div2
      div>
    
  body>
html>

vertical-align的默认值是baseline。当div1 设置了属性overflow:hidden后，会影响基线，baseline会设置在bottom margin的边缘。
如果有帮助的话，麻烦周一的时候给个采纳，谢谢

你把第一个 /* overflow: hidden; */ 去掉就行