CSS странный сдвиг div

Здравствуйте, я пытаюсь разработать строку состояния для i3wm, используя electronic.
. Electronjs использует механизм рендеринга хрома, поэтому моя веб-страница должна отображаться как в Chrome.
. Я хочу разработать пользовательский интерфейс, но я столкнулся со странным поведением, когда один div размещен правильно, а второй сдвинут по вертикали.

Почему это происходит и как это исправить?

Вот мой код:

HTML:

<div class = "module slide slide-right">
    <div class = "hover-icon">
        <i class = "material-icons">power_settings_new</i>
    </div>
    <div class = "slider">
        <a href = "" class = "action">
            <i class = "material-icons">settings_backup_restore</i>
            <span class = "action-label"> Restart</span>
        </a>
        <a href = "" class = "action">
            <i class = "material-icons">power_settings_new</i>
            <span class = "action-label"> Wyłącz</span>
        </a>
    </div>
</div>

CSS:

* {
  user-select: none;
  box-sizing: border-box;
}

body {
  color: #ccc;
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  font-weight: 300;
  overflow: hidden;
  padding: 0;
  margin: 0;
  background-color: #181818;
}

p {
  margin: 0;
}

a {
  text-decoration: none;
  color: #ccc;
}

a:hover {
  color: #fff;
}


.module {
  height: 50px;
  position: absolute;
  display: inline-block;
  box-sizing: border-box;
  background-color: green;
}

.slide .hover-icon {
  display: inline-block;
  padding: 13px;
  height: 50px;
  width: 50px;
  background-color: blue;
}

.slide .slider {
  display: inline-block;
  height: 50px;
  background-color: red;
}

https://codepen.io/bulion121/pen/vbBaJM