I have troubles to select the following items:
...
<app-chat-message>
<app-chat-message-simple>
<div class="chat-message left">...</div>
</app-chat-message-simple>
</app-chat-message>
<app-chat-message>
<app-chat-message-simple>
<div class="chat-message left">...</div>
</app-chat-message-simple>
</app-chat-message>
<app-chat-message>
<app-chat-message-simple>
<div class="chat-message left">...</div> <== every last "left" element
</app-chat-message-simple>
</app-chat-message>
<app-chat-message>
<app-chat-message-simple>
<div class="chat-message right">...</div>
</app-chat-message-simple>
</app-chat-message>
<app-chat-message>
<app-chat-message-simple>
<div class="chat-message right">...</div> <== every last "right" element
</app-chat-message-simple>
</app-chat-message>
<app-chat-message>
<app-chat-message-simple>
<div class="chat-message left">...</div> <== every single "left" element
</app-chat-message-simple>
</app-chat-message>
<app-chat-message>
<app-chat-message-simple>
<div class="chat-message right">...</div> <== every single "right" element
</app-chat-message-simple>
</app-chat-message>
...
In short: I need every div element within class "left" or "right" that ends with the other ones. I need this to formate a chat conversation list like on the screenshot bellow:

Do anyone have an idea?