getting a tad lost in trying to vertically align text - css

Question

Display flex works great as the variable height columns all equal one another. I have not really used CSS for many years. So I do apologise if I have missed something obvious. Any help would be massively appreciated.
.row {
display: flex;
}
I followed some S-O posts to vertically align text, however, I cannot seem to replicate the shared success of others.
.row {
display: flex;
justify-content: center;
align-items: center;
}
Works however not as I intended, the individual divs bgs no longer stretch, to equal heights.
I read some further posts and css-tricks, stumbled across align-self stretch.
[class*='col-'] {
float: left;
padding-right: 28px;
border: 1px solid red;
align-self: stretch;
}
.row {
display: flex;
justify-content: center;
align-items: center;
}
This unfortunately seems to go back to my first image.
I read another post, highlighting the use of flex:1.
The columns jump around, in a manner, I am not accustomed to.
.row {
display: flex;
justify-content: center;
align-items: center;
}
[class*='col-'] {
float: left;
padding-right: 28px;
border: 1px solid red;
flex: 1;
}
If i remove the justify-content and align-items. That does not really help me either.
Here is my markup:
<div class='row'>
<div class='col-m-1 col-t-1 col-d-1' style='background-color:blueviolet;'>
<a href="" id='navigation_link'>☰</a>
</div>
<div class='col-m-1 col-t-2 col-d-2' style='background-color: blue;'>
<h1>Header</h1>
</div>
<div class='col-m-4 col-t-5 col-d-9 t-end' style='background-color:blueviolet;'>
<form>
<input type='search' placeholder='Search Today' minlength='100'>
<input type='submit' value='Search'>
</form>
</div>
</div>
Here is snapshot of my css
#media only screen and (min-width: 768px) {
h1 {
font-size: 2.4rem;
/* =24px */
}
.col-d-1 {
width: 8.33%;
}
.col-d-2 {
width: 16.66%;
}
.col-d-3 {
width: 25%
}
.col-d-4 {
width: 33.33%
}
.col-d-5 {
width: 41.66%
}
.col-d-6 {
width: 50%;
}
.col-d-7 {
width: 58.33%;
}
.col-d-8 {
width: 66.66%;
}
.col-d-9 {
width: 75%;
}
.col-d-10 {
width: 83.33%;
}
.col-d-11 {
width: 91.66%
}
.col-d-12 {
width: 100%;
}
[class*='col-'] {
float: left;
padding-right: 28px;
border: 1px solid red;
}
}
[class*='col-']:first-of-type {
padding-left: 16px;
}
[class*='col-']:last-of-type {
padding-right: 16px;
}
.row {
display: flex;
}
.row::after {
content: "";
clear: both;
display: table;
}

Answer 1

For posterity, I managed to resolve this problem with the help of this S-O post.
You need to add display flex to the child items; then centre. Thus adding the below snippet to my original post remedies my issue.
.row [class*='col-'] {
display: flex;
align-items: center;
}