Align Class containing a class - html

Question

image 1
I want to set the class first to the right of the class second containing form . I want to keep the class first inside the form that is below Please share your experience. I can do that be using margin left and margin right. How to achieve this using floats or any other way.
body, select, input, textarea, button, h1, h2, h3, h4, h5, h6 {
font-family: Hind;
line-height: 1.2;
}
input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="tel"], input[type="date"], textarea {
margin-left: 0px;
}
input:focus {
outline: none !important;
border:1px solid green;
box-shadow: 0 0 10px #719ECE;
}
textarea:focus {
outline: none !important;
border:1px solid red;
box-shadow: 0 0 10px #719ECE;
}
#exitpopup-modal .modal-body {
padding:0px;
}
.modal-body {
padding: 0px;
}
.first
{
margin-left:12%;}
.second img {
width: 369px;
height: 404.6px;
margin-top: -1%;
}
.second form{
display:table;
margin-left: 37px;
margin-top: 29px;
}
.row1{
font-size: 10px;
font-family: inherit;
display: table-row;
border: 2px solid red;
}
.row1 #name,#mail,#contact{
color:black;
width: 260px;
height: 34px;
padding: 6px 12px;
border-radius:3.9px;
border-color: #777;
display:table-cell;
}
.row1 textarea{
width: 260px;
height: 110px;
color:black;
border-color: #777;
display:table-cell;
}
.row1 #submit{
width:152px;
height: 44px;
margin-left:15%;
background-color:#337ab7;
color:white;
border-color:none;
}
.row1 #submit:hover{
width:152px;
height: 44px;
margin-left:15%;
background-color:white;
color:#337ab7;
border-color:none;
}
.second,.first{
float: left;
}
.clearfix{
clear:both
}
.titan{
text-align:center;
font-family: inherit;
font-size: 20px;
padding-top: 38px;
}
<div class="second">
<form id="form" name="theform" action="javascript:myformsubmit()">
<div class="row1">
<input id="name" type="text" placeholder="Your name *" required><br><br>
</div>
<div class="row1">
<input type="email" id="mail" placeholder="Your email *" required><br><br>
</div>
<div class="row1">
<input id="contact" type="number" placeholder="Your phonenumber*" required><br><br>
</div>
<div class="row1">
<textarea id="reason" rows="5" placeholder="Any reason to leave ?*" required></textarea><br><br>
</div>
<div class="first">
<input type="radio" name="experience" value="I am happy and purchased/will purchase" checked> I am happy and purchased/will purchase<br>
<input type="radio" name="experience" value="You are not selling in my city"> You are not selling in my city<br>
<input type="radio" name="experience" value="You do not have the product i am looking for"> You do not have the product i am looking for<br>
<input type="radio" name="experience" value="I find your prices higher than market"> I find your prices higher than market<br>
</div>
<div class="row1">
<input id="submit" type="submit" value="Submit" >
</div>
</form>
</div>
<div class="titan">Please share your experience </div>
<div class="clearfix"></div>

Answer 1

Updated jsfiddle. When you are in small screens you should use #media queries to change your input width and it will work even in mobile screen.
#form , .first{
display:inline-block;
}
.first{
float:right;
margin:25px;
}