How to make two elements get half space in single row

Question

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 `#myCard` to `.myCard` as its a class selector and not and id — Tanner Dolby, Jun 24 '20 at 23:35

score 1 · Answer 1 · answered Jun 24 '20 at 23:45

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>

score -1 · Answer 2 · answered Jun 24 '20 at 23:36

-1

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

answered Jun 24 '20 at 23:36

kandi_galaxy

24
3

Yuyo · Answer 3 · 2020-06-27T02:45:44.900

-1

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>

edited Jun 27 '20 at 02:45

answered Jun 24 '20 at 23:38

Yuyo

17
2

If you correct your typo ("halffWidth"/"halfWidth"), the result is the same as in the question... – Johannes Jun 24 '20 at 23:42
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 – Yuyo Jun 27 '20 at 02:48

How to make two elements get half space in single row

3 Answers3