Indent (margin, padding) between elements (css)

Question

I've faced a problem: there is a flex wrapper which has style

justify-content: space-between

and

flex-wrap: wrap

I want left button, right button and text block to have some space between before wrapping. And after right button's transition on the next line there won't be any indentation on the "border" side. Hope you understand.

.long-line {
    max-width: 400px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border: 1px solid;
}
button {
    background: #FFF;
    border: 1px solid;
    border-radius: 5px;
    padding: 10px 12px;
}

<div class="long-line">
  <div class="left-item"><button>Big left button</button></div>
  <div class="center-item">more and more text</div>
  <div class="right-item"><button>right button</button></div>
</div>

https://i.sstatic.net/ykxcI.png
https://i.sstatic.net/FtyXj.png
https://i.sstatic.net/80JbP.png

Answer 1

I found one of possible solutions:
1) remove padding from "long-line";
2) wrap buttons in divs;
3) add padding to "long-line"'s children.

.long-line {
    max-width: 400px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    border: 1px solid;
}

.long-line > div {
    padding: 10px;
}

button {
    background: #FFF;
    border: 1px solid;
    border-radius: 5px;
    padding: 10px 12px;
}
    
    

<div class="long-line">
    <div class="left-item"><button>Big left button</button></div>
    <div class="center-item">more and more text</div>
    <div class="right-item"><button>right button</button></div>
</div>