On my second and third cards on this page on codepen here: https://codepen.io/maricoder/pen/mydPPGgThose middle icons icons are supposed to align vertically going downward.I tried using flex direction column for about 30 minutes and it refused to budge. Eventually I just gave up and put two break < br > marks in my html. I am fairly sure this is not the way to get things to go down vertically. Can you see where I went wrong in the code?Note: I also read some of the other threads and tried making the icons a list but that destroyed the centering.
.middle {display: flex;align-self: center;flex-direction: column;color: red;font-size: 40px;align-items: center;line-height: .8em; }ereI was expecting that adding `flex-direction: column;
would make those middle icons go downward but they wouldn't budge.To give you an idea of what this looked like before I put the break marks, see photo here.image of cards before html break marks
`