Positioning inputfield in jade - html

Question

Trying to get a span that is a circle next to it a inputfield and next to that a button. This inside a div that has 50% and the div next to its floats left and is also 50% with an image inside.
This is the JADE file
section(class=spec.__class)&attributes(attributes)
.row
.options
.left.first
img(src='images/prijzen.png', alt='prijzen')
.right
p.
In onze Surprise Webshop is elk pakje gratis. Wat u precies heeft besteld, blijft wel een verrassing tot u het pakje ophaalt in een afhaalpunt of pakjesautomaat naar keuze.
.row.clear
span.nr.bgred 1
.row.rightfields
form.inputform(name="add-estimation", method="post")
.inputfielddiv.floatleft
input.styleds(type="text", name="title", placeholder="Vul hier uw persoonlijke code in")
.inputdiv.floatright
a.button.red.round.ctaright(type="submit", value=">", href="#kiespakje")
This is the CSS
.row {
#include center(1024px);
margin-bottom: 4em;
width: auto;
max-width: 840px;
float: none;
display: block;
margin-right: auto;
margin-left: auto;
padding-left: 0;
padding-right: 0;
margin-bottom: 2em;
.fix {
clear: both;
}
.clear {
clear: both;
}
.inputdiv {
overflow: hidden;
padding-right: .5em;
}
.options {
margin-top: 70px;
.left {
float: left;
clear: none;
text-align: inherit;
width: 40%;
margin-left: 0px;
margin-right: 5%;
}
.left img{
width: 340px;
margin-left: 20px;
margin-top: 30px;
margin-bottom: 15px;
}
.right {
padding: 0 20px;
float: left;
clear: none;
text-align: inherit;
width: 100%;
margin-left: 0px;
margin-right: 0%;
border-left: 0;
#include breakpoint($tablets) {
padding: 0 0 0 50px;;
}
.nr {
position: relative;
text-align: center;
padding-top: 15px;
width: 3em;
height: 3em;
display: inline-block;
border-radius: 100%;
}
.bgred {
background: #EF2637;
color: white;
}
.leftbol {
float: left;
width: 100%;
}
.rightfields {
width: 100%;
float: right;
display: inline-block;
.inputform {
width: 100%;
.floatleft {
width: 75%;
float: left;
#include breakpoint($tablets) {
width: 100%;
}
.styleds {
width: 100%;
padding: 0.8em;
margin-bottom: 1em;
border-radius: 0.2em;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
box-shadow: none;
border: none;
color: black !important;
border-radius: 0;
background-color: #D5D5D5;
font-style: italic;
}
}
.floatright {
width: 20%;
float: right;
.buttoncode {
text-decoration: none;
border: none;
padding: 22px;
font-weight: bold;
font-size: 15px;
display: inline-block;
width: 100%;
max-width: 250px;
margin-top: 0 auto;
text-align: center;
color: white;
background-color: #EF2637;
}
}
}
}
}
.right p {
text-align: center;
margin-left: 0px;
#include breakpoint($tablets) {
text-align: left;
}
}
.right span{
margin-left: 140px;
#include breakpoint($tablets) {
margin-left: 0px;
}
}
}
}