Text align right in TD tag - html

Question

I have text and image in the td tag. The text is stay still but trying to text-align: right; an image. So I used span class on the image. But image doesn't listen to command still next to the text, not going right corner.
<td>マンションを購入しようとした時に何から始めたら良いでしょうか
<span class="open-button-big">
<img src="img/open-button-big.png" class="open-button-big-class">
</span>
</td>
it's looking like :
and this is the CSS
table {
margin-top: 20px;
display: none;
}
table {
border-top: solid 1px blue;
}
tr {
border-top: solid 1px blue;
}
th {
text-align: center;
padding: 10px 10px 10px 10px;
}
td {
font-size: 14px;
}
.Question {
width: 40px;
}
span {
text-align: right !important;
}
.open-button-big-class {
width: 70px;
height: auto;
}

Answer 1

Since span is an inline elements and it wraps the image you should set it's display to block or use a div instead. To align the whole span to the right, use float: right
table {
margin-top: 20px;
width: 100%;
}
table {
border-top: solid 1px blue;
}
tr {
border-top: solid 1px blue;
}
td {
font-size: 14px;
}
span {
float: right !important;
display: block;
}
.open-button-big-class {
width: 70px;
height: auto;
}
<table>
<tr>
<td>マンションを購入しようとした時に何から始めたら良いでしょうか
<span class="open-button-big">
<img src="https://www.reduceimages.com/img/share-icon.png" class="open-button-big-class">
</span>
</td>
</tr>
</table>

Answer 2

You can use this:
span {
float: right !important;
}
But I strongly recommand using this kind of css selector:
table td span {
float: right !important;
}
Because if you select just span, all of spans will get this style, using specific selection in better for controlling over other spans