Css - Input sizes different resolutions and screen Sizes - css

Question

I'd like to know the code in CSS so my two different input types be equal in every monitor.
So I have 1 big input type, and below 7 inputs that should cover the same width. Its all great in my 17.3inch monitor with fullhd. But in anothers, the seven inputs surpass the first one.
Here's the code:
input[type="text"] {
font: 95% oxygen, sans-serif;
border:2px solid rgb();
width: 7%;
height: 2%;
padding: 0px;
margin-right: 0%;
padding: 10px;
background: #ffffff;
}
input[type="text1"] {
font: 95% oxygen, sans-serif;
border:2px solid rgba();
width: 50%;
height: 2%;
padding: 2px;
margin-right: 0%;
margin-left: 0%;
padding: 10px;
background: #ffffff;
Please help me, I saw every forum but I cant get it.When its wrong, it looks like this

Answer 1

I think as per your scenario this solution should work:
// JavaScript to toggle text placeholder for small inputs
$('.smallText').on('input', function () {
if ($(this).val().length) {
$(this).parent().addClass('empty');
} else {
$(this).parent().removeClass('empty');
}
});
.clearfix::before, .clearfix::after {
content: '';
display: table;
clear: both;
}
.container {
padding: 10px;
}
.largeText, .smallText {
padding: 5px;
border: 1px solid #999;
font-size: 16px;
margin-bottom: 5px;
box-sizing: border-box;
outline: none;
}
.largeText {
width: 100%;
}
.textWrapper {
box-sizing: border-box;
position: relative;
float: left;
width: 20%;
}
.textWrapper+.textWrapper {
padding-left: 5px;
}
.textWrapper::before {
content: 'small text...';
display: block;
padding: 5px;
border: 1px solid #999;
color: #777;
font-family: Arial;
}
.textWrapper.empty::before {
color: transparent;
}
.smallText {
position: absolute;
top: 0;
width: 100%;
padding: 5px 10px 5px 5px;
border: 0;
background-color: transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<input type="text" placeholder="large text..." class="largeText" />
<div class="inner-container clearfix">
<div class="textWrapper"><input type="text" class="smallText" /></div>
<div class="textWrapper"><input type="text" class="smallText" /></div>
<div class="textWrapper"><input type="text" class="smallText" /></div>
<div class="textWrapper"><input type="text" class="smallText" /></div>
<div class="textWrapper"><input type="text" class="smallText" /></div>
</div>
</div>