Prevent padding from making an element bigger?

Question

I have an element with a 70% width, and it is floating beside another element with 30% width. However, when I add 25px of padding, the element expands and breaks the format.

Is there any way to make padding increase the contents' distance from the element's edge, as opposed to making the element bigger?

.seventy {
  float: left;
  width: 70%;
  background-color: lightsalmon;
}

.thirty {
  float: left;
  width: 30%;
  background-color: lightgreen;
}

.padded {
  padding: 25px; /* Forces box onto next line */
}

<div>Works:</div>
<div class="seventy">70% wide</div>
<div class="thirty">30% wide</div>

<br><br>

<div>Broken:</div>
<div class="seventy">70% wide</div>
<div class="thirty padded">30% wide, padded</div>

Answer 1

When you use the border-box model, the padding is included in the box size. See here for details.

.seventy {
  float: left;
  width: 70%;
  background-color: lightsalmon;
}

.thirty {
  box-sizing: border-box;
  padding: 25px;
  float: left;
  width: 30%;
  background-color: lightgreen;
}

<div class="seventy">70% wide</div>
<div class="thirty">30% wide</div>

Answer 2

I would create another element of the same type (may I guess it's a div?) inside the element and set that one to have a padding/margin of 25px.

For example:

<div id="wrapper">
 <div id="width30">
 </div>
 <div id="width70">
  <div id="padding25">
   Acctual content here.
  </div>
  </div>
 </div>
</div>