Css flex aligments issue - html

Question

I got stuck stacking the elements inside the flex. I want these arrows to be aligned within this square as in the design image.
This is how it looks is code. It's examle of html and css file.
// This is CSS code picture were missed
.external-login {
display: flex;
flex-direction: row;
justify-content: flex-start;
margin-right: 20px;
height: 64px;
text-align: center;
padding: 21px 30.5px 21px 30px;
border-radius: 8px;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04);
border: solid 1px #dee2eb;
background-color: #ffffff;
h3 {
color: #525458;
}
}
.row {
width: 100%;
height: auto;
display: flex;
flex-direction: column;
margin: 10px 0;
}
.google-image {
background-image: url($url);
background-repeat: no-repeat;
width: 20px;
margin-right: 15px;
}
.facebook-image {
background-image: url('https://www.flaticon.com/svg/static/icons/svg/145/145802.svg');
background-repeat: no-repeat;
width: 20px;
margin-right: 15px;
}
.carat-image {
background-image: url($url);
background-repeat: no-repeat;
width: 20px;
margin-right: 15px;
}
<!-- This is HTML code -->
<div class="row external-login">
<div class="google-image"></div>
<h3>Continue with Google</h3>
<div class="carat-image">
</div>
</div>
<div class="row external-login">
<div class="facebook-image"></div>
<h3>Continue with Facebook</h3>
<div class="carat-image">
</div>
</div>
These pictures were missed in code snippet below.
EDIT
I've changed
justify-content: flex-start;
to
justify-content: space-between;
and got like this, not bad but text is not align.

Answer 1

Try adding height: fit-content; and align-self: center to your .carat-image class.

Answer 2

Simple change will fix the issue. add
height: fit-content
align-self: center
.carat-image {
background-image: url($url);
background-repeat: no-repeat;
width: 20px;
height: fit-content;
align-self: center;
}

Answer 3

To vertically center the elements which are wrapped by flex div, try align-items: center. Also, to align a particular child to the right, Use justify-self: end. Use flex-direction: column to place the elements inline. To fix the width, add flex: 1 to h3
// This is CSS code picture were missed
.external-login {
display: flex;
flex-direction: row;
justify-content: flex-start;
margin-right: 20px;
height: 64px;
text-align: center;
padding: 21px 30.5px 21px 30px;
border-radius: 8px;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04);
border: solid 1px #dee2eb;
background-color: #ffffff;
h3 {
color: #525458;
}
}
.row {
width: 100%;
height: auto;
display: flex;
align-items: center;
margin: 10px 0;
}
.google-image {
background-image: url($url);
background-repeat: no-repeat;
width: 20px;
margin-right: 15px;
}
.facebook-image {
background-image: url($url);
background-repeat: no-repeat;
width: 20px;
margin-right: 15px;
}
.carat-image {
background-image: url($url);
background-repeat: no-repeat;
width: 20px;
margin-right: 15px;
align-self: center;
justify-self: right;
flex-basis: 50px;
height: fit-content;
}
h3 {
flex:1
}
.content .row:nth-child(2) .carat-image {
background-color: red;
justify-content: flex-end;
}
.content .row:nth-child(3) .carat-image {
background-color: red;
justify-content: flex-end;
}
<!-- This is HTML code -->
<div class="row external-login">
<div class="google-image">.</div>
<h3>Continue with Google</h3>
<div class="carat-image"> ></div>
</div>
<div class="row external-login">
<div class="facebook-image"></div>
<h3>Continue with Facebook</h3>.
<div class="carat-image">></div>
</div>