When resizing browser window, the elements within left- and right-container wrap lines. I want that the elements in the right container still aligned 13px to the right after line wrap. But they aligned straight to the center-container. How to align elements within right-container analog to the elements within left-container?
.row {
display: flex;
align-items: center;
justify-content: space-between;
}
.left-container, .right-container {
display: flex;
flex-wrap: wrap;
}
.left-container {
margin-right: auto;
margin-left:13px;
}
.right-container {
margin-left: auto;
margin-right: 13px;
/*
justify-content: flex-end;
*/
}<div class="row">
<div class="left-container">
<span class="info-container">Left Element 1</span>
<span class="info-container">Left Element 2</span>
</div>
<div class="center-continer">
<span>Center Element 1</span>
</div>
<div class="right-container">
<span class="info-container">Right Element 1</span>
<span class="info-container">Right Element 2</span>
</div>
</div>