Как добавить и выровнять кнопки на баннере?

Баннер должен оставаться рядом с информационными кнопками, как в этом примере:

Я хочу переместить этот ярлык "Реклама от Google" влево от кнопок.

function removeHeader() {
  var list = document.getElementById("main");
  list.removeChild(list.childNodes[0]);
}

body {
  margin: 100px;
}

.banner-buttons {
  display: inline-block;
  position: relative;
  font-size: 14px;
  width: 50px;
  overflow: hidden;
}

.showme {
  display: none;
  font-size: 10px;
}

.infoLink:hover .showme {
  display: inline-block;
  float: left;
}

.closeBtn {
  cursor: pointer;
  display: inline-block;
}

i:hover {
  color: #d075f4;
}

<div id = "main">
  <div class = "nanoSaturnBanner">
    <p>teteasdasdasdsadasds sad asdasdasdasdasdas</p>

    <div class = "banner-buttons">
      <label class = "showme">Ads by Google</label>
      <a class = "infoLink" href = "https://support.google.com/adsense/#topic=3373519" target = "_blank">
        <i class = "fas fa-info-circle"></i>
      </a>
      <div class = "closeBtn" onclick = "removeHeader()">
        <i class = "far fa-window-close"></i>
      </div>
    </div>

  </div>

HTML-код: вот HTML-код, там вы найдете две кнопки и значки. Если чего-то не хватает, просто спросите, и я обновлю сообщение.

В чем проблема ?

— 07.05.2018 20:32

javascript html css

07.05.2018 15:37

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Ответы 1

Попробуйте изменить свой p на div и переместить его после всего остального. Затем добавляем CSS для перемещения рекламной части:

<div id = "main">
  <div class = "nanoSaturnBanner">
    <div class = "banner-buttons">
      <label class = "showme">Ads by Google</label>
        <a class = "infoLink" 
         href = "https://support.google.com/adsense/#topic=3373519" 
         target = "_blank">
         <i class = "fas fa-info-circle"></i>
        </a>
    <div class = "closeBtn" onclick = "removeHeader()">
     <i class = "far fa-window-close"></i>
  </div>
</div>
  <div id = "text">teteasdasdasdsadasds sad asdasdasdasdasdas</div>
</div>

затем добавьте это в новый класс div