title: Space Between margin/width pushing other element/div
body: <p>Stackoverflow. So for the past couple of hours now I've been sitting here trying to figure this thing out and ripping my hair out. So I've come here to ask a question and hopefully get an answer.</p>
  <p>My problem is I am trying to align 3 divs, that has text in them to be on the same line, but also be able to have a certain width and or margin-left, or margin-right without pushing the other divs.</p>
  <p>What I currently have done to align all 3 divs is having a parent container with display flex, and then having child containers for each text.</p>
  <p>Here's the code:</p>
  <p>HTML</p>
  <pre><code>&lt;div class=&quot;transactionSecondInnerWrapper&quot;&gt;
  &lt;div class=&quot;transactionMiddleLeft&quot;&gt;Text&lt;/div&gt;
  &lt;div class=&quot;transactionMiddleMiddle&quot;&gt;Text&lt;/div&gt;
  &lt;div class=&quot;transactionMiddleRight&quot;&gt;Text&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>CSS</p>
  <pre><code>.transactionSecondInnerWrapper {
   display: flex;
   justify-content: space-between
  }
  .transactionMiddleLeft {
   margin-left: 10px /*This is what pushes my middle element/div but not the right one*/
  }
  .transactionMiddleRight {
    margin-right: 10px /*This also pushes when margin becomes bigger*/
  }
  </code></pre>
  <p>Also I realized that whenever I update my text or make it longer in any way for example the left one, that will result in pushing the middle div aswell.</p>
  <p>Thanks for reading.</p>
  <p>Kind regards.</p>