Aligning text on a box - html

Question

I have this flip box which looks like this
When I hover on it, it would turn around and would look like this.
I want to know, how do I move the text to the right only, I tried putting text-align: right; on my css but it didn't work. Am I doing it wrong?
Here's my CSS and HTML:
.box9 {
background-color: #4C586F;
width: 250px;
height: 150px;
margin: 0 auto;
padding: 45px;
}
.box10 {
background-image: url("../img/commended/erwin.png");
background-size: 50%;
background-repeat: no-repeat;
width: 250px;
height: 150px;
margin: 0 auto;
padding: 45px;
}
<div class="col_third">
<div class="hover panel">
<div class="front">
<div class="box9">
<p style="font-size:180%; color: white">Kudos!</p>
</div>
</div>
<div class="back">
<div class="box10">
<p style="font-size:180%; color: black">sdasdsadas</p>
</div>
</div>
</div>
</div>

Answer 1

I would do it like this, setting text-align: right in the back view and to center in the front view, vertical centering of the p tag and also changing some other settings (no padding [therefore changed width and height settings] and some other details):
.box9 {
background-color: #4C586F;
width: 340px;
height: 240px;
margin: 0 auto;
text-align: center;
}
.box10 {
background-image: url(http://placehold.it/150x250/);
background-size: auto 100%;
background-repeat: no-repeat;
width: 340px;
height: 240px;
margin: 0 auto;
text-align: right;
}
.box9 p,
.box10 p {
margin: 0;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.box10 p {
padding-right: 20px;
}
<div class="col_third">
<div class="hover panel">
<div class="front">
<div class="box9">
<p style="font-size:180%; color: white">Kudos!</p>
</div>
</div>
<div class="back">
<div class="box10">
<p style="font-size:180%; color: black">sdasdsadas</p>
</div>
</div>
</div>
</div>