CSS не применяется должным образом к элементам, созданным JQuery, но волшебным образом исправляется при переключении элементов в элементе inspect

Question

У меня есть интерфейс чата, где я динамически добавляю сообщения. Ниже приведен пример кода внутри функции отправки сообщения.

$chatlogs.append(
        $('<div/>', {'class': 'chat self'}).append(
            $('<p/>', {'class': 'chat-message', 'text': text})));

Обратите внимание, что Engli sh усекается справа. Но поверь мне, CSS в порядке. Когда я проверяю элемент и переключаю (отключаю и снова включаю) флажки max-width или margin, волшебным образом выравнивание выравнивается.

Так что технически я не делаю изменений в CSS. Я просто отключил и снова включил элемент, и волшебным образом все было отсортировано. Это ясно означает, что CSS настроен правильно. Но когда вы добавляете элементы, используя JS, он не может правильно получить CSS.

Как мне решить эту проблему?