Solution 1 :

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>

Solution 2 :

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;
}

Solution 3 :

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>

Problem :

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

Comments

Comment posted by Tanner Dolby

One thing right away, in your CSS, change

Comment posted by Johannes

If you correct your typo (“halffWidth”/”halfWidth”), the result is the same as in the question…

Comment posted by Yuyo

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

By

Leave a Reply

Your email address will not be published. Required fields are marked *