Currently struggling with the layout of a website project, specifically positioning a text input and a textarea above each other next to a larger radio box. I came across a similar issue on Stack Overflow but unfortunately, it did not solve my problem. Ideally, I need the layout to be like this: https://i.sstatic.net/MUApR.png
.szavazas {
margin-left: 5%;
margin-top: 3%;
}
.raddio {
float: left;
width: 200px;
margin-bottom: 5%;
color: white;
background: green;
border-radius: 8px;
border: 1px solid #003300;
text-align: left;
box-shadow: 0 0 2px 1px black;
height: 350px;
}
input[type="radio"] {
text-align: left;
margin-top: 10px;
margin-bottom: 10px;
}
.velemeny {
float: left;
box-shadow: 0 0 2px 1px black;
width: 200px;
height: 175px;
}
.textin {
float: left;
border: 1px solid black;
background-color: #003300;
color: white;
width: 200px;
height: 165px;
}<div class="szavazas">
<form class="raddio" action="/action_page.php">
<input type="radio" name="plant" value="Large Flamingo Flower">Large Flamingo Flower<br>
<input type="radio" name="plant" value="Gerbera">Gerbera<br>
<input type="radio" name="plant" value="Indoor Runner Plant">Indoor Runner Plant<br>
<input type="radio" name="plant" value="Crab Flower">Crab Flower<br>
<input type="radio" name="plant" value="Green Finch">Green Finch<br>
<input type="radio" name="plant" value="Ivy">Ivy<br>
<input type="radio" name="plant" value="Azalea">Azalea<br>
<input type="radio" name="plant" value="Mother-in-Law's Tongue">Mother-in-Law's Tongue<br>
<input type="radio" name="plant" value="Variegated Dragon Tree">Variegated Dragon Tree<br>
<input type="radio" name="plant" value="Philodendron">Philodendron<br>
</form>
<textarea class="opinion" rows="7" cols="40" placeholder="Share your opinion about the plant/flower and if you have encountered it before."></textarea>
<form class="textin" action="/action_page.php">
Here will be some long text that I will write here.<br>
<input type="text" name="otherplant">
</form>
</div>