Как установить два div в одной строке - ошибка с моим кодом?

Question

CSS:

.icon_live{
            background-color: #fe3860;
            width: 100px;
            height: 25px;
            border-radius: 15px;
            display: grid;
            place-items: center;
        }
        .anim_live{
            background-color: #aeaeae;
            width: 10px;
            height: 10px;
            border-radius: 50%;
        }
        .icon_live,.anim_live{
            display: inline;
        }

HTML:

<div class="icon_live"><text style="margin-bottom: 2px;color: white;"><b>LIVE</b></text>
</div><span id="anim_live"></span>

Как это выглядит (пожалуйста, игнорируйте черную линию слева):

Мне бы хотелось, чтобы серый кружок был справа от LIVE

ТАКЖЕ

Кто-нибудь знает как я могу заставить серый круг исчезать и появляться снова каждую 1 секунду?

Спасибо!

Answer 1

Вы используете id в html и class в css для anim_live. Сделайте оба элемента display:inline-block и используйте анимацию css для серой точки. Подробнее о css анимациях https://www.w3schools.com/css/css3_animations.asp.

.icon_live{
            background-color: #fe3860;
            width: 100px;
            height: 25px;
            border-radius: 15px;
            display: grid;
            place-items: center;
        }
        .anim_live{
            background-color: #aeaeae;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            animation: animateGreyDot 1s linear infinite;
        }
        .icon_live,.anim_live{
            display: inline-block;
            vertical-align: middle;
        }
        @keyframes animateGreyDot{
          from {opacity: 1}
          to{opacity: 0}
        }

<div class="icon_live"><text style="margin-bottom: 2px;color: white;"><b>LIVE</b></text>
</div><span class="anim_live"></span>