Text-align right, table

Question

I’m having a little trouble with my td I want to position the letters next to the image..., equal to the right but it does not follow the command of the text-align: right;

.pvsp {
    width: 335px;
    float: right;
    background: #252525;
}

.result-battle{
    width: 147.5px;
    height: 75px;
}

.detail-player {
    display: inline-block;
}

.align-right {
    text-align: right;
}

.align-left {
    text-align: left;
}

.detail-player, .player-name {
    text-shadow: 0 1px 0 #171717;
    color: #908f8f;
}

.result-w {
    text-rendering: optimizelegibility;
    text-shadow: 0 0 7.4px rgba(92, 198, 149, 0.26);
    color: #4fc18c;
    text-transform: uppercase;
    font-size: 10px;
}

.result-l {
    text-rendering: optimizelegibility;
    color: #f63358;
    text-transform: uppercase;
    font-size: 10px;
}

.result-img-left {
    float: right !important;
}

.result-img-right {
    float: left;
}

.winner {
    background-image:url(../imgs/border-green.png);
    width: 57px;
    height: 57px;
}

.winner img {
    width: 30px;
    height: 30px;
    display: block;
    margin: 13px 13px auto;
}

.detail-kd {
    color: #555;
    font-size: 8pt;
}

.detail-kd b {
    color: #979797;
}
.title_sidebar1 {
padding: 20px;
margin-left: 10px;
color: #e6e6e6;
font-size: 10pt;
font-weight: 700;
}
.player-name {
font-size: 10pt;
font-weight: 750;
}

<div class="pvsp">
                    <div class="title_sidebar1">PLAYES VS PLAYER</div>
                <hr class="vdivider-black" />
                    <table class="battle-players">
                        <tbody>
                            <tr>
                                <td class="result-battle">
                                    <div class="detail-player align-right">
                                        <span class="result-w">winner</span>
                                        <p class="player-name">Laurent</p>
                                        <p class="detail-kd"><b>KD</b> 1.11</p>
                                    </div>
                                    <div class="result-img-left winner">
                                       <img src="https://via.placeholder.com/30">
                                    </div>
                                </td>
                                
                                <td style="text-align: center;" width="40px">vs</td>
                                
                                <td class="result-battle">
                                    <div class="detail-player align-left">
                                        <span class="result-w">winner</span>
                                        <p class="player-name">Laurent</p>
                                        <p class="detail-kd"><b>KD</b> 1.11</p>
                                    </div>
                                    <div class="result-img-right winner">
                                       <img src="https://via.placeholder.com/30">
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

Answer 1

Your problem is more with HTML and element order than with CSS, my tip is you put float:right both in the image and in the div with the text.

Only for that you need in HTML to put the <div class="result-img-left winner"> before the <div class="detail-player align-right result-img-left"> Even as you already had a CSS class with only float:right I used it myself to make that fit notice that last div I put the class result-img-left

See how you got to understand better. I repeat that I did not need to put anything in CSS, I just changed the order of Text and Image in HTML and put the class result-img-left that you already had in your code. Note that when you use float:right the first element to receive this float will always be the element that will be the most right, so I reversed the order by placing the image before the text, so it is the first element on the right and the text that also has float floats beside it in the right position.

.pvsp {
  width: 335px;
  float: right;
  background: #252525;
}

.result-battle {
  width: 147.5px;
  height: 75px;
}

.detail-player {
  display: inline-block;
}

.align-right {
  text-align: right;
}

.align-left {
  text-align: left;
}

.detail-player,
.player-name {
  text-shadow: 0 1px 0 #171717;
  color: #908f8f;
}

.result-w {
  text-rendering: optimizelegibility;
  text-shadow: 0 0 7.4px rgba(92, 198, 149, 0.26);
  color: #4fc18c;
  text-transform: uppercase;
  font-size: 10px;
}

.result-l {
  text-rendering: optimizelegibility;
  color: #f63358;
  text-transform: uppercase;
  font-size: 10px;
}

.result-img-left {
  float: right !important;
}

.result-img-right {
  float: left;
}

.winner {
  background-image: url(../imgs/border-green.png);
  width: 57px;
  height: 57px;
}

.winner img {
  width: 30px;
  height: 30px;
  display: block;
  margin: 13px 13px auto;
}

.detail-kd {
  color: #555;
  font-size: 8pt;
}

.detail-kd b {
  color: #979797;
}

.title_sidebar1 {
  padding: 20px;
  margin-left: 10px;
  color: #e6e6e6;
  font-size: 10pt;
  font-weight: 700;
}

.player-name {
  font-size: 10pt;
  font-weight: 750;
}

<div class="pvsp">
  <div class="title_sidebar1">PLAYES VS PLAYER</div>
  <hr class="vdivider-black" />
  <table class="battle-players">
    <tbody>
      <tr>
        <td class="result-battle">
          <div class="result-img-left winner">
            <img src="https://via.placeholder.com/30">
          </div>
          <div class="detail-player align-right result-img-left">
            <span class="result-w">winner</span>
            <p class="player-name">Laurent</p>
            <p class="detail-kd"><b>KD</b> 1.11</p>
          </div>
        </td>

        <td style="text-align: center;" width="40px">vs</td>

        <td class="result-battle">
          <div class="detail-player align-left">
            <span class="result-w">winner</span>
            <p class="player-name">Laurent</p>
            <p class="detail-kd"><b>KD</b> 1.11</p>
          </div>
          <div class="result-img-right winner">
            <img src="https://via.placeholder.com/30">
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

---

Educational example on the float:right

Note that in HTML a div 1 is the first and the div 4 the last, however it is the div 1 which is more to the right. So your image should come first to be more to the right, then the text to be next to the image right

Display the code below to see the example

.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  float: right;
}

<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>

Answer 2

Use young flex-box!

.result-battle:first-child {
  display: flex;
  justify-content: flex-end;
}