Два блока рядом CSS

Question

Всем привет. Мне нужно расположить справа такой же блок. Пытался через float: left, но тогда основной блок уходит в упор на лево. Подскажите как мне лучше сделать правильное расположение, чтобы основной блок остался по центру без изменений

Answer 1

.wrap{
  border: 1px solid #000;
  display: inline-block;
  padding: 10px;
}

h1,h2{
  margin: 0;
}

.men{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}
.men_left img, .men_right img{
  width: 40px;
  height: 40px;
  margin-right: 5px;
}
.men_left{
 margin-right: 10px;
 border: 1px solid #000;
 padding: 10px;
 display: -webkit-flex;
 display: -moz-flex;
 display: -ms-flex;
 display: -o-flex;
 display: flex;
 -ms-align-items: center;
 align-items: center;
}

.men_right{
  border: 1px solid #000;
  padding: 10px;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
}

.token{
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  padding: 10px;
  margin-top: 10px;
}

.sgen{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  -ms-align-items: center;
  align-items: center;
}

.link > a{
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  text-decoration: none;
  color: #000;
  padding: 8px;

}

.link_button > button{
  background-color: #3AAAF5;
  border: none;
  padding: 10px;
  color: #fff;
}

<h1>Панель управления</h1>
<div class="wrap">
  <div class="info">
    <h2>Личная информация</h2>
  </div>
    <div class="men">
      <div class="men_left">
       <img src="https://i.ibb.co/sgckhHt/image.jpg" alt="image" border="0">
        <span class='men_left__span'>MaYoR:D</span>
      </div>
      <div class="men_right">
         <img src="https://i.ibb.co/sgckhHt/image.jpg" alt="image" border="0">
        <span class='men_right__span'>76561198967718926</span>
      </div>
    </div>
      <div class="token">
        Настройка токенна
      </div>
      <div class="sgen">
        <div class="link">
          <a href="#">тут ссылка123131312313</a>
        </div>
        <div class="link_button">
          <button href="#">Сгенерировать токен</button>
        </div>
      </div>
</div>

БЛОГ НА HUSL

Два блока рядом CSS

Ответы (1 шт):