Reusing component with absolute position in a flexbox

Your code has a lot of typos in it

here is a working example https://codesandbox.io/s/naughty-elbakyan-m6s4e

its className not classname, missing closing div tag , lowerNumber className is different than class (case). also missing semi-colon on left property.

to position to the bottom right. using bottom and right 5px.

put position relative on the PlayingCard

      <div className="PlayingCard">
        <span className="upperNumber">{number}</span>
        <span className="lowerNumber">{number}</span>
      </div>

.PlayingCard {
  position: relative;
  width: 500px;
  height: 100px;
  background: tomato;
}

.upperNumber {
  position: absolute;
  top: 5px;
  left: 5px;
}

.lowerNumber {
  position: absolute;
  right: 5px;
  bottom: 5px;
}