Text not getting vertically aligned

Question

I tried to change the layout of how my text is being shown in the box with the help of vertically-align but it has no affect on the code.

I want the text to start from the bottom center of the box for the front boxes and

To start from Top center of the box for the back foxes when it flips.

Also is there a way to fit the text into the boxes?

i'm using flexboxes to get a responsive layout.

 .flexbox { margin: 0; padding: 0; list-style-type: none; display: flex; flex-flow: row wrap; justify-content: center; } .panels { list-style-type: none; padding: 0; width: 100%; margin: 2% auto; } .panels li { position: relative; width: 20%; margin: 5px; display: block; box-sizing: border-box; float: left } .panels li div { width: 100%; padding: 50% 0; text-align: center; vertical-align: text-bottom; cursor: pointer; -moz-box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0px 2px 7px rgba(0, 0, 0, .2); box-shadow: 0px 2px 7px rgba(0, 0, 0, .2); } .panels div.back { background: linear-gradient(to bottom, #e40000, #f07611); transform: rotateY(90deg); height: 18px; vertical-align: text-bottom; font-family: Cabin; color: #3d4250; position: absolute; left: 0; top: 0; } .panel div.front { vertical-align: text-top; background: white; font-family: Cabin; font-size: 24px; font-weight: 600; font-style: normal; font-stretch: normal; line-height: normal; letter-spacing: normal; color: #3d4250; position: relative; } /*// ANIMATION STYLES //*/ .panels li:hover div.front { animation: twirl 0.2s ease-in forwards; } .panels li:hover div.back { animation: twirl 0.2s 0.2s ease-in forwards reverse; } @keyframes twirl { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(90deg); } } 

 <ul class="panels flexbox"> <li class="rcol"> <div class="front" style="vertical-align: text-bottom;">Sense of Purpose</div> <div class="back" style="font-size: 14px;"> <b>Sense of Purpose</b><br><br><br> "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div> </li> <li class="rcol"> <div class="front">Responsiblity</div> <div class="back">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> </li> <li class="rcol"> <div class="front">Passion</div> <div class="back">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> </li> <li class="rcol"> <div class="front">Proximity</div> <div class="back">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> </li> <li class="rcol"> <div class="front">Values and respect</div> <div class="back">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> </li> <li class="rcol"> <div class="front">Empowerment</div> <div class="back">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> </li> <li class="rcol"> <div class="front">Opportunities</div> <div class="back">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> </li> <li class="rcol"> <div class="front">Learning</div> <div class="back">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> </li> </ul> 

Answer 1

Add this style

.panels li:hover div.back {
  height: 100%;
  top: 0;
  padding: 0;
}

 .flexbox { margin: 0; padding: 0; list-style-type: none; display: flex; flex-flow: row wrap; justify-content: center; } .panels { list-style-type: none; padding: 0; width: 100%; margin: 2% auto; } .panels li { position: relative; width: 20%; margin: 5px; display: block; box-sizing: border-box; float: left } .panels li div { width: 100%; padding: 50% 0; text-align: center; vertical-align: text-bottom; cursor: pointer; -moz-box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0px 2px 7px rgba(0, 0, 0, .2); box-shadow: 0px 2px 7px rgba(0, 0, 0, .2); } .panels div.back { background: linear-gradient(to bottom, #e40000, #f07611); transform: rotateY(90deg); height: 18px; vertical-align: text-bottom; font-family: Cabin; color: #3d4250; position: absolute; left: 0; top: 0; } .panel div.front { vertical-align: text-top; background: white; font-family: Cabin; font-size: 24px; font-weight: 600; font-style: normal; font-stretch: normal; line-height: normal; letter-spacing: normal; color: #3d4250; position: relative; } /*// ANIMATION STYLES //*/ .panels li:hover div.front { animation: twirl 0.2s ease-in forwards; } .panels li:hover div.back { animation: twirl 0.2s 0.2s ease-in forwards reverse; height: 100%; top: 0; padding: 0; } @keyframes twirl { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(90deg); } } 

 <ul class="panels flexbox"> <li class="rcol"> <div class="front" style="vertical-align: text-bottom;">Sense of Purpose</div> <div class="back" style="font-size: 14px;"> <b>Sense of Purpose</b> "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div> </li> <li class="rcol"> <div class="front">Responsiblity</div> <div class="back">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> </li> <li class="rcol"> <div class="front">Passion</div> <div class="back">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> </li> <li class="rcol"> <div class="front">Proximity</div> <div class="back">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> </li> <li class="rcol"> <div class="front">Values and respect</div> <div class="back">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> </li> <li class="rcol"> <div class="front">Empowerment</div> <div class="back">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> </li> <li class="rcol"> <div class="front">Opportunities</div> <div class="back">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> </li> <li class="rcol"> <div class="front">Learning</div> <div class="back">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> </li> </ul>