Basic 3 grid layout html/css - html

Question

So basically I need to create a 3 grid layout which looks like:
-------------------------------------
| Image | The name of logo | > |
-------------------------------------
I have somewhat do this with :
<div class="panel panel-default">
<div class="card-header">
<a class="card-link row" href="/webview/topup">
<p style="font-size: 14sp; margin-bottom: 0">
<img src="../images.png" th:src="#{../images/image.png}" width="10%"
height="10%" style="vertical-align: middle; font-family: 'Barlow', sans-serif;">
The name of logo
<img src="../arrow.png" th:src="#{../arrow.png}" width="2%" height="2%"
style="vertical-align: middle;" align="right";>
</p>
</a>
</div>
</div>
But somehow my arrow is not centered because it only uses align right. How can I make my arrow to be align right and centered at the same time?
Im sorry to ask such basic questions, because Im kinda new to html/css. Thanks.

Answer 1

There are multiple methods to achieve this.
You can use flexbox on the parent:
{
display: flex;
align-items: center;
justify-content: flex-start;
}
and add:
{
margin-left: auto;
}
to the last child. In your example, the arrow.
A good visual introduction/overview of flexbox is available here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
A concrete example of this with your code:
.card-link {
display: flex;
align-items: center;
justify-content: flex-start;
}
.arrow {
margin-left: auto;
width: 1em;
height: 1em;
}
.logo {
width: 2em;
height: 2em;
}
img {
width: 100%;
height: auto
}
<div class="panel panel-default">
<div class="card-header">
<a class="card-link row" href="/webview/topup">
<img class="logo" src="https://via.placeholder.com/150">
<p class="text">The name of logo </p>
<img class="arrow" src="https://via.placeholder.com/150">
</a>
</div>
</div>

Answer 2

This can be done using css "grid" or "flex". You can refer to many
articles related to 'css flex' and 'css grid'. You can easily align
items in both vertical and horizontal. And there are many ways to align items inside a grid. This will be suitable for your case.
.grid {
display: grid;
height: 100px;
background-color: #f9f9f9;
grid-template-columns: auto 1fr auto;
align-items: center;
grid-gap: 20px;
}
<div class="grid">
<div>Image</div>
<div>The name of logo</div>
<div>></div>
</div>