Can SCSS detect if 2 child elements of a container are placed on the same row or split over 2 rows? - css

Question

I have a container div with 2 buttons inside, used in several places on my website, with different content on the buttons. Ideally, they should be placed next to eachother, but if the text in the buttons is too large, they are split over 2 rows, underneath eachother. In that case, there should be a 10px margin between them.
I don't know if it makes any difference, but I'm using Bootstrap 3 and SCSS.
Is there a way to put a condition in there in SCSS to add this margin-bottom to the first element ONLY if they are displayed on 2 rows?
I've also tried simply adding margin-top: 10px to both buttons, but then I have an unnecessary extra margin.
I was also thinking of calculating the total width of the child elements (the buttons) and checking if it exceeds the width of the container, but I have no idea how to achieve this without having to use javascript.

Answer 1

You can do this with plain HTML/CSS. Wrap your two buttons in two divs, an outer and an inner one.
Apply Flexbox layout to the outer div.
Add a negative margin to the inner div.
Give your buttons a positive margin, equal to the negative margin of the inner div.
.outer-wrapper {
background: #ddd;
display: flex;
}
.inner-wrapper {
margin: -10px;
}
.btn {
margin: 10px;
}
/* Test the button wrapping */
.narrow-wrapper {
width: 20rem;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="outer-wrapper">
<div class="inner-wrapper">
<button type="button" class="btn btn-primary">Button with a lot of content inside</button>
<button type="button" class="btn btn-primary">Another button</button>
</div>
</div>
<br>
<div class="outer-wrapper narrow-wrapper">
<div class="inner-wrapper">
<button type="button" class="btn btn-primary">Button with a lot of content inside</button>
<button type="button" class="btn btn-primary">Button below the first one</button>
</div>
</div>