Using display: flex; on the container will allow both child elements to shrink a bit and fit them in to one line. (and use either class or ID on the container…)
.myCard{
border-style: solid;
border-width: thin;
padding: 12px 5px 5px 5px;
display: flex;
align-items:center;
}
.halfWidth{
width:50%;
}<div class="myCard">
<input type="text" class="halfWidth" value="click">
<input type="button" class="halfWidth" value="click" onclick="foo()">
</div>You could add display:flex to #myCard and as Tanner mentioned above change to .myCard
.myCard{
border-style: solid;
border-width: thin;
padding: 12px 5px 5px 5px;
display: flex;
}
The problem is that you are using class on html and call the id on the css, beside that you are not giving a width to the father myCard. And the names are wrong.
Try this:
.myCard{
width:100%;
border-style: solid;
border-width: thin;
padding: 12px 5px 5px 5px;
}
.halfWidth{
position: relative;;
width:49%;
display:inline-block;
vertical-align:middle;
}<div class="myCard">
<input type="text" class="halfWidth" value="click">
<input type="button" class="halfWidth" value="click" onclick="foo()">
</div>I try to make two elements input type text and input type button in a single line and each element get half of the space.
Here is how I try to achieve it:
#myCard{
border-style: solid;
border-width: thin;
padding: 12px 5px 5px 5px;
}
.halfWidth{
position: relative;;
width:50%;
}<div class="myCard">
<input type="text" class="halfWidth" value="click">
<input type="button" class="halfWidth" value="click" onclick="foo()">
</div>But as you can see my code not works
One thing right away, in your CSS, change
If you correct your typo (“halffWidth”/”halfWidth”), the result is the same as in the question…
No is not, 50% it’s not exact using display:inline-block, you can use float:left, instead but you will need to declarate position:relative and overflow:hidden to the father, and then 50% will work. Check de code snippet and they look equal width and one next to each other. display:flex and flex:2 works great too