Using css ::after to create horizontal dash after input without impacting other elements

Issue

using ::after to create a "-" between two inputs. The issue is that I need to move the dash central between the two inputs, I have been trying to do this by adding margin or padding but then that pushes the second input further out which can't happen.

How can I adjust my current code to allow the "-" to move to the left/right without pushing other elements around?

.column {
  padding-right: 24px;
  padding-left: 24px;
}

.styled-group, styled-group-two {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

.styled-group::after {
  content: "-";
  margin: 0 5px;
  height: 1px;
}

.input-two {
  width: 45px;
}

.container {
  display: flex;
}

<div class="container">
  <div class="column">
    <div class="styled-group">
      <input class="input-one" type="text">
    </div> 
  </div>  
  <div class="column">
    <div class="styled-group-two">
      <input class="input-two" type="text">
    </div> 
  </div>    
</div>  

 

Codepen: https://codepen.io/simoncunningham/pen/mdwMgyL

Solution

If you don't mind giving margin to inputs, this can be handled by absolute positioning.

.styled-group,
styled-group-two {
  position: relative;
  display: flex;
  flex-wrap: wrap;
}

.styled-group input {
  margin: 0rem 1rem;
}

.styled-group::after {
  content: "-";
  position: absolute;
  left: 95%;
  height: 1px;
}

.input-two {
  width: 45px;
}

.container {
  display: flex;
}

Answered By - Mert Uygur