Add icon to end of radio input div - html

Question

I'm attempting to create a similar UI as below using radio inputs. Most of the UI was fairly easy to recreate, the only exception is adding the arrow (icon?) to the end of the label div. I've attempted to div an arrow in and force it to the center using margins, but it's obviously not a very good solution. What's the best way to add the arrow at the end of the label?
Here's the current code
<div id='results'>
<form>
<input type="radio" name="result" value="1" id='opt-1' checked>
<label for="opt-1"><h3>Option 1</h3>
<p>Short Description of Option 1</p></label><br>
<input type="radio" name="result" value="2" id='opt-2' checked>
<label for="opt-2"><h3>Option 2</h3>
<p>Short Description of Option 2</p></label><br>
<input type="radio" name="result" value="3" id='opt-3' checked>
<label for="opt-3"><h3>Option 3</h3>
<p>Short Description of Option 3</p></label><br>
</form>
</div>
JSFiddle
EDIT:
I'm aware the JSFiddle doesn't apply the background correctly. The code does operate fine on production.

Answer 1

I've created a wrapper of class .list for each radio item to bind the data.
<div id='results'>
<form>
<div class="list">
<span>
<input type="radio" name="result" value="1" id='opt-1' checked>
</span>
<span class="radio-content">
<span>
<label class="mb-1" for="opt-1"><h3>Option 1</h3>
<p class="d-inline">Short Description of Option 1</p></label><br>
</span>
<span class="arrow"><</span>
</span>
</div>
<div class="list">
<span>
<input type="radio" name="result" value="1" id='opt-1' checked>
</span>
<span class="radio-content">
<span>
<label class="mb-1" for="opt-1"><h3>Option2</h3>
<p class="d-inline">Short Description of Option 2</p></label><br>
</span>
<span class="arrow"><</span>
</span>
</div>
</form>
</div>
CSS code here
.list{
display: flex;
align-items:center;
}
.mb-1{
margin-bottom: 8px;
}
.radio-content{
width:100%;
display:flex;
align-items:center;
justify-content: space-between;
}

Answer 2

Instead of "<" you can use the appropriate icon with the appropriate spacing
label {
background-color: #16a085;
background: linear-gradient(to right, #16a085, #66a99c);
width: 80%;
padding-left: 15px;
padding-top: 10px;
margin-bottom: 3px;
}
form > label > h3 {
margin-bottom: 1px;
}
form > label > p {
margin-top: 1px;
}
form > label h3::after {
content: '\276E';
position: absolute;
right: 0;
padding-right: 20px;
}
input[type=radio] {
display: none;
}
<div id='results'>
<form>
<input type="radio" name="result" value="1" id='opt-1' checked>
<label for="opt-1">
<h3>Option 1</h3>
<p>Short Description of Option 1</p>
</label><br>
<input type="radio" name="result" value="2" id='opt-2' checked>
<label for="opt-2">
<h3>Option 2</h3>
<p>Short Description of Option 2</p>
</label><br>
<input type="radio" name="result" value="3" id='opt-3' checked>
<label for="opt-3">
<h3>Option 3</h3>
<p>Short Description of Option 3</p>
</label><br>
</form>
</div>

Answer 3

So flexbox is awesome for layouts like these. It performs well and has great browser support (http://caniuse.com/#search=flexbox). IE has some issues but should be able to work around.
ul {
list-style: none;
width: 400px;
border: 1px solid #ccc;
margin: 0;
padding: 0;
}
ul li {
display: flex;
flex-direction: row;
justify-content: space-between;
border-bottom: 1px solid #ccc;
}
ul li:last-child {
border-bottom: none;
}
.title {
flex-grow: 1;
padding-top: 4px;
}
.title h3 {
margin: 0;
}
.title p {
font-size: 9px;
color: #aaa;
margin: 1px 0 0 0;
}
.icon {
padding-left: 10px;
width: 40px;
line-height: 50px;
display: inline-block;
}
.toggle-switch {
line-height: 50px;
width: 50px;
display: inline-block;
text-align: center;
}
<ul>
<li>
<span class="icon">*</span>
<div class="title">
<h3>Stops</h3>
<p>Non stop, 1 stop, 2+ stops</p>
</div>
<span class="toggle-switch">^</span>
</li>
<li>
<span class="icon">*</span>
<div class="title">
<h3>Duration</h3>
<p>Any</p>
</div>
<span class="toggle-switch">^</span>
</li>
</ul>