How to keep div width 50% on text change?

Question

I have two divs with width: 50% and text content inside that are wrapped in the container. The problem is that when text content changes, width also changes:

I have a fixed width of the container equal to 200px:

.container {
  display: block;
  width: 200px;
}

.text1 {
  background-color: red;
  width: 50%;
  display: inline;
}

.text2 {
  background-color: blue;
  width: 50%;
  display: inline;
}

<div class='container'>
  <div class='text1'>Text1</div>
  <div class='text2'>Text2</div>
</div>

How I can keep 50% of child div width even when text is changing? Link to JSFiddle:

You may use [code snippet](https://meta.stackoverflow.com/a/356679/14032355) in SO next time and I already do it for you now. — ikhvjs, Dec 29 '21 at 12:55
Maybe [this is good for you?](https://jsfiddle.net/skobaljic/yhfboL9q/) — skobaljic, Dec 29 '21 at 12:59

score 5 · Accepted Answer · answered Dec 29 '21 at 12:58

You may use CSS Flexbox here:

.container {
  display: flex;
  width: 200px;
}

.text1 {
  background-color: red;
  width: 50%;
}

.text2 {
  background-color: blue;
  width: 50%;
}

<div class='container'>
  <div class='text1'>Text1</div>
  <div class='text2'>Text2</div>
</div>

Nitheesh · Answer 2 · 2021-12-29T13:06:15.097

CSS Solution

inline elements only consume the the width that its content specifies.

Go for display: block; with float: left; or display: flex implementation.

display: block implementation

.container {
  display: block;
  width: 200px;
}

.text {
  width: 50%;
  display: block;
  float: left;
}

.text1 {
  background-color: red;
}

.text2 {
  background-color: blue;
}

<div class='container'>
  <div class='text text1'>1</div>
  <div class='text text2'>Text2</div>
</div>

display: flex implementation

In case of flex layout, there is no need to specify width to the child elements. Just add flex-grow: 1 or flex: 1 to the child elements.

.container {
  display: flex;
  width: 200px;
}

.text {
  flex: 1;
}

.text1 {
  background-color: red;
}

.text2 {
  background-color: blue;
}

<div class='container'>
  <div class='text text1'>1</div>
  <div class='text text2'>Text2</div>
</div>

score 0 · Answer 3 · answered Dec 29 '21 at 13:25

Although flexbox should work, as given by other responses, you can also do it by using columns.

Just specify column-count to 2 columns on .container and set column-width to 50% on .text1 and .text2.

Here´s it:

.container {
  display: block;
  width: 200px;
  column-count: 2;
}

.text1 {
  background-color: red;
  column-width: 50%;
}

.text2 {
  background-color: blue;
  column-width: 50%;
}

<div class='container'>
     <div class='text1'>1</div>
     <div class='text2'>Text2</div>
</div>

Here´s the JSFiddle.

How to keep div width 50% on text change?

3 Answers3