how to move radio buttons in css - html

Question

I am trying to move my radio buttons by using positioning but it doesn't seem to work. I have added an id for each radio option and trying to style it that way. The whole thing is in a class called ticket…
I have added an id to the input but it doesn't work:
echo '<tr><th>Has this been Resolved?</th><td><input type="radio" name="resolve" value="Yes" id="yes">Yes<input type="radio" name="resolve" value="No" id="no">No</td></tr>
<tr><th></th><td><textarea name="reply"></textarea></tr></td>
<tr><th>Add Reply/Message</th><td><input type="submit" name="submit" value="Reply"></tr></td>
This is my CSS:
.ticket input[type="radio"] {
position: relative;
right: 55em;
}

Answer 1

First, your HTML is a bit messed up. Second, don't use tables to position elements. Tables are for tables full of data -- at least, since about 1998 or so. Use div and span elements.
The way to easily position elements specifically requires three steps:
Put the elements inside a div.
Set the div's position to relative.
Set all of the elements' position to absolute.
I've put an example together here.
You'll notice that I put your radio buttons inside a span element, and targeted those with the CSS. This allows the captions to be positioned along with the radio buttons; you position the span instead of the input element. If you target the input element, the captions won't be affected and will stay in their default positions.
Also, I just used first-child and last-child as selectors. You could assign each one an id if you want to, but I thought I would show you this as well.
Now, you position the buttons by changing the left and top values of the span elements that contain them.
#theRadios {
height: 100px;
position: relative;
}
#theRadios span {
position: absolute;
}
#theRadios span:first-child {
top: 10px;
left: 0;
}
#theRadios span:last-child {
top: 40px;
left: 0:
}
<div id="theHeader">Has this been Resolved?</div>
<div id="theRadios">
<span><input type="radio" name="resolve" value="Yes" id="yes">Yes</span>
<span><input type="radio" name="resolve" value="No" id="no">No</span>
</div>
<div>
<textarea rows=4 cols=50 placeholder="Add Reply/Message"></textarea>
</div>
<div>
<input type="submit" name="submit" value="Reply">
</div>

Answer 2

Hiding elements by offsetting the element beyond visible space is prone to errors and haphazard for someone else who looks at the code.
Nevertheless, you can fix it with other ways such as
Use display: none.
Use visibility: hidden.
Use opacity: 0.
Position it off the screen using position: absolute and an insanely big value
like left: -9999px.