<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style>
.questions__text {
display: inline-block;
min-width: 50px;
border-bottom: 1px solid #000;
}
</style>
</head>
<body>
<ul class="questions__list">
<li class="questions__item">
<div>1. I <span class="questions__text"></span> a teacher.</div>
<div class="answers">
<div class="option-group"></br>
<input type="radio" value="1" name="1" id="one" required="" />
<label for="one">am</label>
<input type="radio" value="2" name="1" id="two" required="" />
<label for="two">are</label>
<input type="radio" value="3" name="1" id="three" required="" />
<label for="three">be</label>
<input type="radio" value="4" name="1" id="four" required="" />
<label for="four">is</label>
<div class="option-group option-group--dont-know">
<input type="radio" value="0" name="1" id="zero" required="" />
<label for="zero">я не знаю ответ</label>
</div>
</div>
</div>
</li>
</ul>
<script>
document.querySelector('.answers').onchange = function(e) {
if (e.target.tagName.toLowerCase() != 'input')
return;
var id = e.target.id;
var spanElem = document.querySelector('.questions__text');
spanElem.innerText = document.querySelector('label[for=' + id + ']').innerText;
};
</script>
</body>
</html>