Как сделать чтобы один div был справа другой слева и при дублировании они были с новой строки?

Question

[kaidos]

Нужно что бы было вот так.

А у меня вот так вот)

<div class="message_content-bar">

            <div class="message-wrapper">
                <a class="message-to-you">ogfjgfhgfhgfhhf</a>
                <a class="message-to-you">fdhgfhh</a>
                <a class="message-to-you">gfgfhhgfh</a> 
                <a class="message-to-your">fddhlghp</a>
                <a class="message-to-your">fddhhp</a>
                <a class="message-to-you">gfgfhhgfh</a>
                <a class="message-to-your">ogfjgfhgfhgfhhf</a>
            </div>

        </div>

.message_content-bar{
    height: 100%;
    overflow: auto;
    user-select: text;
    padding: 0 10px;
}

.message-wrapper{
    display: flex;
    flex-direction: column;
    width: 100%;
}

.message-to-you{
    width: fit-content;
    padding: 7px;
    border-radius: 9px;
    background-color: #C4C4C4;
    margin-top: 10px;
}

.message-to-your{
    width: fit-content;
    padding: 7px;
    border-radius: 9px;
    background-color: #C4C4C4;
    margin-top: 10px;
}

Answer 1

[Ankhena]

align-self отвечает за выравнивание конкретного элемента вдоль поперечной оси флексбокса.

Тем, которым нужно направо, задавайте align-self: flex-end

Comments

[kaidos]

А как сделать чтобы текст переносился?

[Ankhena]

kaidos, куда? когда?
Сделайте песочницу с видимой проблемой на jsfiddle.net

[kaidos]

Ankhena, JSFiddle
Вот. Текст выходит за рамки врапера если он большой а нужно чтобы он переходил на след. строку

[Ankhena]

kaidos, предлагаю не использовать в письменной речи слова такой длины
https://jsfiddle.net/tr8b9xon/

А если всё таки слово длинное, то использовать свойства для переноса.
https://habr.com/ru/post/445166/

[Ankhena]

kaidos, ау?

[kaidos]

Ankhena, я сделал. Нужно было поставить max-width и добавить word-wrap: break-word;

[Ankhena]

kaidos, отлично