Allocate equal width to child elements with css [closed]

Answer 1

Assuming the following sample markup:

Solution #1 - Flexbox

.wpr {
  display: flex;
  width: 400px;
}

.wpr div {
  flex: 1 1 0;
  border: 1px solid yellow;
  background: pink;
  text-align: center;
  min-height: 40px;
}

Solution #2 - CSS tables with table-layout:fixed

.wpr {
    display:table;
    table-layout:fixed;
    width: 400px;
    min-height: 40px;
    
}
.wpr div {
    display:table-cell;
    border: 1px solid yellow;
    background: pink;
}