flexbox alignment problem
by alexbfree
HTML
<link rel="stylesheet" href="https://alex2.italiapass.com/static/css/bootstrap.min.css">
<script src="https://fonts.googleapis.com/css?family=Raleway:400,400italic,600,600italic,700,700italic,800,800italic"></script>
<div class="new-region-page">
<div id="top-buys" class="three-col-buys row">
<div class="things-col col col-md-4 col-lg-4 col-sm-4 col-xs-12">
<h4 class="title">Things to Do in Rome</h4>
<div class="three-col-buys-row">
<div class="tour-name"><a href="https://italiapass1.rezdy.com/82304/pilgrim-walking-tour-one?iframe=1&voucherCode=SAVE15" class="buy-link">Pilgrim Walking Tour I >></a></div>
<div class="price-or-saving"><span class="old-price">$100</span><span class="new-price">$85</span><span class="price-qualifier">p/p based on 4 in group</span></div>
</div>
<div class="three-col-buys-row">
<div class="tour-name"><a href="https://italiapass1.rezdy.com/catalog/95193/excursions-from-rome?iframe=1&voucherCode=SAVE15" class="buy-link">Day Tours from Rome >></a></div>
<div class="price-or-saving"><span class="old-price">$150</span><span class="new-price">$128</span></div>
</div>
<div class="three-col-buys-row">
<div class="tour-name"><a href="https://italiapass1.rezdy.com/26693/skip-the-line-borghese-gallery-and-gardens-tour?iframe=1&voucherCode=SAVE15" class="buy-link">Skip the Line: Borghese Gallery & Gardens Tour >></a></div>
<div class="price-or-saving"><span class="saving">15% off</span></div>
</div>
<div class="three-col-buys-row">
<div class="tour-name"><a href="https://italiapass1.rezdy.com/77547/let-s-make-pizza-at-ristorante-al-braciere?iframe=1&voucherCode=SAVE15" class="buy-link">Let's Make Pizza at Ristorante Al Braciere >></a></div>
<div class="price-or-saving"><span class="old-price">$43</span><span...
CSS
div.new-region-page {
font-family: 'Raleway', sans-serif;
font-feature-settings: "lnum" 1;
}
div.new-region-page div.row {
margin-top:61px;
margin-bottom:45px;
}
div.new-region-page span.red {
color: #ed1c24;
}
div.new-region-page div.three-col-buys hr {
margin:27px auto;
width:158px;
height:1px;
background-color:black;
}
div.new-region-page div.container {
width: 1019px;
}
div.new-region-page span.saving {
margin:0px 0px 18px 0px;
flex:0 0 90px;
min-width: 90px;
font-weight: 800;
align-content: flex-end;
}
div.new-region-page span.old-price {
display: inline-block;
padding: 0 9px;
font-weight: 400;
font-size: 13px;
color: #000000;
flex: 0 0 45px;
min-width: 45px;
align-content: flex-end;
}
div.new-region-page span.new-price {
display: inline-block;
padding: 0 9px;
font-weight: 800;
font-size:16px;
min-width:45px;
flex:0 0 45px;
align-content: flex-end;
}
div.new-region-page div.tour-name a,
div.new-region-page span.new-price {
color: #ed1c24;
}
div.new-region-page a.read-more {
font-size: 12px;
text-transform: uppercase;
font-weight: 800;
text-align: right;
display: block;
color: #000000;
cursor: pointer;
text-decoration: none;
letter-spacing: 1px;
}
div.new-region-page h4.title {
font-weight: 800;
font-size: 25px;
line-height: 30px;
margin-bottom: 5px;
}
div.new-region-page div.three-col-buys-row {
padding-bottom: 9px;
padding-top: 11px;
border-bottom: 1px solid black;
font-size: 15px;
display:flex;
flex-direction:row;
justify-content: space-between;
align-items: center;
}
div.new-region-page div.three-col-buys-row div.tour-name {
flex: 0 0 157px;
}
div.new-region-page div.three-col-buys-row span.new-price {
flex: 0 0 45px;
}
div.new-region-page div.three-col-buys-row span.old-price {
flex: 0 0 45px;
}
div.new-region-page div.three-col-buys-row span.saving {
flex: 0 0 90px;
}
div.new-region-page div.three-col-buys div.col {
...