Align labels and corresponding textfields with flexbox - css

Question

I was wondering how can i align labels and corresponding textfields with flexbox.I have tried the fixed width way.But it isnt responsive.
I will attach a image below.In which I tried to align them using a flexbox but didnt work the way I wanted it to :
PS:The line in between is just a indication for where i want the hyphens(separators) to be aligned.
The HTML code:
<div class="steam-ids">
<h5 class="mb-5 section-title">STEAM ID'S</h5>
<div class="profile-overview-steam3-id">
<label class="name-label">
<strong>STEAM3ID</strong>
</label>
<label class="data-label">
<span class="separator">-</span>
<%= dataObj.objSteamIds.steam3id %>
</label>
<span class="steam3-copy">
<i class="far fa-clone"></i>
</span>
</div>
<div class="profile-overview-steam32-id">
<label class="name-label">
<strong>STEAMID32</strong>
</label>
<label class="data-label">
<span class="separator">-</span>
<%= dataObj.objSteamIds.steam2id %>
</label>
<span class="steam32-copy">
<i class="far fa-clone"></i>
</span>
</div>
<div class="profile-overview-steam64-id">
<label class="name-label">
<strong>STEAMID64</strong>
</label>
<label class="data-label">
<span class="separator">-</span>
<a href="<%= dataObj.objSteamIds.steam64 %>">
<%= dataObj.objSteamIds.steam64 %>
</a>
</label>
<span class="steam64-copy">
<i class="far fa-clone"></i>
</span>
</div>
<% if(dataObj.objSteamIds.customURL){ %>
<div class="profile-overview-customURL">
<label class="name-label">
<strong>CUSTOM URL</strong>
</label>
<label class="data-label">
<span class="separator">-</span>
<a href="<%= dataObj.objSteamIds.customURL %>">
<%= dataObj.objSteamIds.customURL %>
</a>
</label>
<span class="customURL-copy">
<i class="far fa-clone"></i>
</span>
</div>
<% } %>
</div>
I know that is a lot of HTML.There is a wrapper around the elements inside the container which has a class of "steam-ids".Inside that there are separate "div" for every element.For example.'steam3id' has a div which has a label and a corresponding textfield with a class of "profile-overview-steam3id".
This is the CSS for what I have tried doing:
.steam-ids div{
display: flex;
justify-content: space-between;
margin-bottom: 1rem;
}
Im pretty new to CSS Im learning any help with how can I align the textfields properly is really appreciated.
I wanted the end result to look like this using flexbox