Button moves down whenever I place text in it - css

Question

I am trying to make a TicTacToe game as my first project and for some reason no matter what I do when I click one of the cells they go down a line and are not in the same row as the others.
this is an example
here is the css:
button {
width: 30%;
height: 200px;
text-align: center;
line-height: 0.85px;
cursor: pointer;
display: inline;
margin: 0px;
font-size: 14rem;
}
this is the typescript where I insert X and O in and the html where I present a button:
public place ()
{
if (this.reserved())
{
if(this.player==1)
{
this.xory = 'X'
this.player++
}
else
{
this.xory = 'O'
this.player--
}
}
}
<button (click) = "place()">{{xory}}</button>

Answer 1

I suggested to use as content of your empty boxes to compensate the alignment when the player didn't fill it with a choice.
By the way it was hard to say how you should initialize that value since you are using Angular.
So you can just opt for using the vertical-align:bottom; in your css rule as showed in this example:
button {
width: 30%;
height: 200px;
cursor: pointer;
text-align: center;
font-size: 10rem;
display: inline;
vertical-align: bottom;
margin: 0 0 3px 0;
padding: 0;
}
<button></button>
<button>O</button>
<button></button>
<button>X</button>
<button></button>
<button></button>
<button></button>
<button>O</button>
<button>X</button>