ordered list numbers are not aligned to the list - html

Question

I have two doubts to be cleared.
my ordered list has numbering of 1 2 3 4 5 6 etc but am not able to bring that aligned with the questions this is going outside the box.
I have a solution button for each questions but I don't know how to place it on the side of the questions.
here i have attached the code and the expected output. if possible kindly complete the code and post.
* {
margin: 0;
padding: 0;
}
body {
font-family: sans-serif;
font-size: 15px;
height: 100%;
width: 100%;
background-color: antiquewhite;
}
input[type="radio"] {
margin-right: 10px;
}
p {
line-height: 30px;
padding: 30px;
}
.play{
position: absolute;
top: 150px;
left: 300px;
padding: 10px;
border-radius: 10px;
font-family: sans-serif;
background-color: darkgreen;
color: #fff;
}
form[name=quiz] {
margin-left: 10%;
margin-right: 10%;
}
ol{
padding: 10px;
list-style-position: inside;
}
ol li{
background-color: #fff;
border-radius: 15px;
margin: 10px;
box-shadow: 0px 1.5px 2px 0px rgb(91, 91, 91);
}
<form name="quiz" id="quiz">
<ol>
<li>
<div class="q1">
<p><strong>The value of \(\frac{1}{{{{\log }_4}120}} + \frac{1}{{{{\log }_5}120}} + \frac{1}{{{{\log }_6}120}}\) is</strong><br><br>
<input type="radio" name="question1" value="0">A.0<br>
<input type="radio" name="question1" value="1">B.1<br>
<input type="radio" name="question1" value="24">C.24<br>
<input type="radio" name="question1" value="120">D.120<br>
</p>
</div>
<div>
<button class="play">Play Solution</button>
</div>
</li>
<li>
<div>
<p><strong>For a 3x3 matrix A, |A| = 4 and adj A = \(\left( {\begin{array}{*{20}{c}}1&p&3\\1&3&3\\2&4&4\end{array}} \right)\), then the value of p is</strong><br><br>
<input type="radio" name="question2" value="4">A.4<br>
<input type="radio" name="question2" value="11">B.11<br>
<input type="radio" name="question2" value="5">C.5<br>
<input type="radio" name="question2" value="0">D.0<br>
</p>
</div>
</li>

Answer 1

Your question isn't aligning with the number of your ordered list because you're using a <p> element for it which is set to display: block; by default. Removing the <p> element will fix the problem.
You can use a <table> to structure your answers and the solution buttons.
* {
margin: 0;
padding: 0;
}
body {
font-family: sans-serif;
font-size: 15px;
height: 100%;
width: 100%;
background-color: antiquewhite;
}
form[name=quiz] {
margin-left: 10%;
margin-right: 10%;
}
ol {
padding: 10px;
list-style-position: inside;
}
ol li {
background-color: #fff;
border-radius: 15px;
margin: 10px;
padding: 30px;
box-shadow: 0px 1.5px 2px 0px rgb(91, 91, 91);
}
li table {
width: 100%;
}
li table td {
vertical-align: top;
padding-top: 20px;
}
li table td:first-child {
width: 70%;
}
td p {
padding-bottom: 10px;
}
td button {
width: 100%;
padding: 10px;
margin-bottom: 5px;
border-radius: 10px;
background-color: darkgreen;
color: #fff;
}
<form name="quiz" id="quiz">
<ol>
<li class="q1">
<strong>The value of \(\frac{1}{{{{\log }_4}120}} + \frac{1}{{{{\log }_5}120}} + \frac{1}{{{{\log }_6}120}}\) is</strong>
<table>
<tr>
<td>
<p>
<input type="radio" name="question1" id="question1" value="0">
<label for="question1">A. 0</label>
</p>
<p>
<input type="radio" name="question1" id="question2" value="1">
<label for="question2">B. 1</label>
</p>
<p>
<input type="radio" name="question1" id="question3" value="24">
<label for="question3">C. 24</label>
</p>
<p>
<input type="radio" name="question1" id="question4" value="120">
<label for="question4">D. 120</label>
</p>
</td>
<td>
<button class="play">Play Solution</button>
<button class="play">Text Solution</button>
</td>
</tr>
</table>
</li>
</ol>
</form>