Как можно сверстать такое?

Question

[Darkness]

Не могу понять как мне выстроить так элементы, буду очень признателен за помощь!

<div class="notifications-attention-warning-main">
        <div class="notifications-attention-warning-main-icon">
          <i class="material-icons">warning</i>
        </div>
        <div class="notifications-attention-warning-main-p">
          <p>Внимание!</p>
        </div>
        <div>
          <p>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. nemo enim ipsam voluptatem.</p>
        </div>
      </div>

.notifications-attention-warning-main {
    border: 2px solid red; /* просто для себя*/
    border-radius: 4px;
    background: radial-gradient(circle farthest-corner at 100px 50px, #ff7da7, #ffa3a4);
    display: flex;
    justify-content: flex-end;   /* нененене в линию все строится */
}

.notifications-attention-warning-main-icon {
    border-right-color: #000;
}

Что у меня:
UPD:
К значку докопался, сделал, кроме сбоку рамки, тут не знаю border-right-style не роботает

Answer 1

[Сергей Горячев]

Я бы картинку сделал фоновым рисунком.

Comments

[Darkness]

Нужно больше практики для таких вот элементов, вот и делаю через material.io

[Darkness]

К сожалению, не могу выставить справа полоску эту.
border-right-style: color не работает, можете дать совет?

[Сергей Горячев]

Антон Добрынин, не понимаю, че ты хочешь, в песочницу оформляй.

[Darkness]

Сергей Горячев,

[Darkness]

Сергей Горячев, Огромное спасибо за помощь!

Answer 2

[Владимир Проскурин]

Ну, можно обернуть весь текст (заголовок и описание) в отдельный блок, который будет на том же уровне, что и блок с картинкой, и добавить родителю align-items: center. Ну плюс еще всякие отступы.
Получится так
jsfiddle.net/Vlad_IT/4qo65sge

Comments

[Darkness]

border-right-color: green; у тебя в коде тоже не работает, сразу его прописал, но просто не видит её

[Владимир Проскурин]

Антон Добрынин, я не вижу на картинке, чтобы был нужен border-right-color: green.

[Darkness]

Владимир Проскурин, green - это для примера. Я решил данную проблему, указав не картике, а контейнеру с текстом, но как мне получить именно такую сероватую ( думаю от черного к белому только с правой стороны) такие цвета как red green работают, а вот градиент нет.

.notifications-attention-warning-main__content {
    padding: 0 40px;
    border: 3px solid green;
    border-right: none;
    border-top: none;
    border-bottom: none;
    border-left-color: linear-gradient(to right, #000 ,#fff );
}

[Владимир Проскурин]

Антон Добрынин, а, ну так https://jsfiddle.net/Vlad_IT/708wxbyn/2/

[Darkness]

Владимир Проскурин, да , ты был прав, немного опасити, размеры и все отлично выглядит! Огромное спасибо за помощь!

Answer 3

[Eugene Chefranov]