Flex how to display table of item that stay aligned vertically

Question

I am working on a website, and this page is the one where I display all the orders the user have.

Here is a JSFiddle Containing all the code.

.flex {    
     display: flex;
}
.flex-i {
     color: white;
     background-color: blue;
     padding: 20px;
     flex-grow: 1;
     border: 5px solid red;
     text-align: center;
}
.flex-i:first-child {
     border-right: 0;
     flex-grow: 3;
}
.flex-i:last-child {
     border-left: 0;
     flex-grow: 3;
}

<div class="flex">
     <div class="flex-i">#ord00000376sufdiwnfgw</div>
     <div class="flex-i">11:54:02, 03-12-2018l</div>
     <div class="flex-i">2824,89€</div>
</div>

<div class="flex">
     <div class="flex-i">Just Normal</div>
     <div class="flex-i">Just Normal</div>
     <div class="flex-i">Just Normal</div>
</div>

<div class="flex">
     <div class="flex-i">#ord00000372suf</div>
     <div class="flex-i">11:32:24, 03-12-2018</div>
     <div class="flex-i">24,71€</div>
</div>

So the problem I have it that I would like to display them all but vertically Align

I want for instance the Price Part to always have the same size, and all the column to have the same sizes to do not display badly as is it actually. BUT keep it mind that the first column order number must be bigger than the date for instance

Answer 1

Just by adding a minimum flex-basis to the main class it seems to look better

EDIT

note the use of word-wrap: break-word;

.flex {    
 display: flex;
position: relative;
}
.flex-i {
 color: white;
 background-color: blue;
 padding: 20px;
 flex-grow: 1;
 border: 5px solid red;
 text-align: center;
 flex-basis: 33%;
  
}
.flex-i:first-child {
 border-right: 0;
 flex-grow: 3;
 word-wrap: break-word;
 max-width: 25%;
 
}
.flex-i:last-child {
 border-left: 0;
 flex-grow: 3;
}

<div class="flex">
     <div class="flex-i">#ord00000376sufdiwnfgw</div>
     <div class="flex-i">11:54:02, 03-12-2018l</div>
     <div class="flex-i">2824,89€</div>
</div>

<div class="flex">
     <div class="flex-i">Just Normal</div>
     <div class="flex-i">Just Normal</div>
     <div class="flex-i">Just Normal</div>
</div>

<div class="flex">
     <div class="flex-i">#ord00000372suf</div>
     <div class="flex-i">11:32:24, 03-12-2018</div>
     <div class="flex-i">24,71€</div>
</div>