Как выровнять текст и изображение, используя css и html? левое и правое положение?

Question

Как выровнять текст и изображение, используя css и html? левое и правое положение. Спасибо, помощь будет оценена.

Это дизайн, которого я хочу достичь

вот мой код пока

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="not-button btn-long- d-flex pull-right">
    <div class="row">
      <div class="col-4">
        <img src="../../assets/img/video/icon_screen_phone.png" class="video-btn-icon">
      </div>
      <div class="col-4">
        <h5 style="margin-top:10px;margin-left:-10px;">Online</h5>
      </div>
      <div class="col-4">
        <h5 style="float:right;">Plugin Status</h5>
      </div>
    </div>
</button>

Answer 1

Вы можете играть с flexbox, вариации не ограничены. Я предлагаю стиль div как button вам нравится. Используйте css отдельный, а не style="" внутренний элемент. Изучите bootstrap, если вы его используете.

Один из вариантов может выглядеть следующим образом.

.circle-green {
  background-color: lightgreen;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  display: inline-block;
}

.properties {
  background: rgb(255, 255, 255);
  background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(248, 249, 250, 1) 50%, rgba(198,200,201,1) 100%);
  max-width: 400px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="d-flex m-2 p-3 properties">
  <div class="mr-auto">
    <span class="mr-1">&#9742;</span>
    <span>Online</span>
  </div>
  <div class="ml-auto d-flex align-items-center">
    <span class="mr-2">Plugin Status</span>
    <span class="circle-green"></span>
  </div>
</div>