Flexbox

<div class="container">
  <p class="p1">Paragraph 1</p>
  <p class="p2">Paragraph 2</p>
  <p class="p3">Paragraph 3</p>
</div>

.container {
  display: flex;
}

p {
  background-color: #f1f1f8;
  padding: 10px;
  border: 1px solid #a1a1a1;
  margin: 5px;
}

.p1, .p2, .p3 {
  flex-grow: 1;
}

<div class="container">
  <p class="p1">First Paragraph</p>
  <p class="p2">Second Paragraph</p>
  <p class="p3">Third Paragraph</p>
</div>

.container {
  display: flex;
}

p {
  background-color: #f1f1f8;
  padding: 10px;
  border: 1px solid #a1a1a1;
  margin: 5px;
}

.p1 {
  flex-grow: 2;
}

.p2, .p3 {
  flex-grow: 1;
}

<div class="container">
  <p class="p1">This paragraph will not grow</p>
  <p class="p2">This paragraph will grow</p>
  <p class="p3">This paragraph will also grow</p>
</div>

.container {
  display: flex;
}

p {
  background-color: #f1f1f8;
  padding: 10px;
  border: 1px solid #a1a1a1;
  margin: 5px;
}

.p1 {
  flex-grow: 0; /* No growth */
}

.p2, .p3 {
  flex-grow: 1; /* Equal growth */
}