Containers Have Same Undesired Width

I have two containers that make up a transparent border that has a 45 degree angle in it. For some reason the second container maintains the same width/padding as the first contain

Solution 1:

There are two possible solutions if you want each container to take up only a certain width (either a fixed width or the width it requires to fit contents). Currently there is no width specified and they are block level elements, so they expand as much as possible. The first container has a lengthy text and so it expands to fit the content (until the point where it cannot extend further) and along with it, parent (#home-img-text) also expands since that doesn't have any fixed width either. Since both containers are part of the same parent, the second container also expands to occupy the full width of the parent (as it is a block container). Thus both of them are getting the same width.

One of them would be to assign display: inline-block to the two containers like in below snippet.

.home-img-text {
  position: absolute;
  left: 13%;
  top: 25%;
}
#home-img-text-container1,
#home-img-text-container2 {
  position: relative;
  margin-bottom: 20px;
  opacity: 1;
  transition: 1s;
  -webkit-transition: 1s;
  overflow: hidden;
}
#home-img-text-container1.fadeDisplay {
  opacity: 1;
  transform: translateX(30px);
  -webkit-transform: translateX(30px);
}
#home-img-text-container2.fadeDisplay {
  opacity: 1;
  transform: translateX(30px);
  -webkit-transform: translateX(30px);
}
#home-img-text-description,
#home-img-text-description2 {
  position: relative;
  display: inline-block;
  margin: 30px0px;
  padding: 30px20px;
  color: #FFF;
  background: rgba(0, 0, 0, .8);
  font-size: 2.5em;
  line-height: 1.4em;
}
#home-img-text-description:before,
#home-img-text-description2:before {
  position: absolute;
  content: '';
  height: 30px;
  width: 100%;
  left: 0px;
  background: inherit;
}
#home-img-text-description:before,
#home-img-text-description2:before {
  top: -30px;
  transform: skewX(45deg);
  transform-origin: right bottom;
}
#home-img-text-description {
  font-family: 'open_sanslight';
}
#home-img-text-description2 {
  color: #efcd36;
  font-size: 1.8em;
}

<divclass="home-img-text"><divid="home-img-text-container1"><divid="home-img-text-description">WRECKING <spanclass="block"></span>& DEMOLITION
      <br>DONE RIGHT.</div></div><divid="home-img-text-container2"><divid="home-img-text-description2">YOU NAME IT,
      <br>WE WRECK IT.</div></div></div>

---

The other would be to assign them an explicit width as required.

.home-img-text {
  position: absolute;
  left: 13%;
  top: 25%;
}
#home-img-text-container1,
#home-img-text-container2 {
  position: relative;
  margin-bottom: 20px;
  opacity: 1;
  transition: 1s;
  -webkit-transition: 1s;
  overflow: hidden;
}
#home-img-text-container1.fadeDisplay {
  opacity: 1;
  transform: translateX(30px);
  -webkit-transform: translateX(30px);
}
#home-img-text-container2.fadeDisplay {
  opacity: 1;
  transform: translateX(30px);
  -webkit-transform: translateX(30px);
}
#home-img-text-description,
#home-img-text-description2 {
  position: relative;
  margin: 30px0px;
  padding: 30px20px;
  color: #FFF;
  background: rgba(0, 0, 0, .8);
  font-size: 2.5em;
  line-height: 1.4em;
}
#home-img-text-description:before,
#home-img-text-description2:before {
  position: absolute;
  content: '';
  height: 30px;
  width: 100%;
  left: 0px;
  background: inherit;
}
#home-img-text-description:before,
#home-img-text-description2:before {
  top: -30px;
  transform: skewX(45deg);
  transform-origin: right bottom;
}
#home-img-text-description {
  font-family: 'open_sanslight';
}
#home-img-text-description2 {
  color: #efcd36;
  font-size: 1.8em;
}
#home-img-text-description {
  width: 300px;
}
#home-img-text-description2 {
  width: 200px;
}

<divclass="home-img-text"><divid="home-img-text-container1"><divid="home-img-text-description">WRECKING <spanclass="block"></span>& DEMOLITION
      <br>DONE RIGHT.</div></div><divid="home-img-text-container2"><divid="home-img-text-description2">YOU NAME IT,
      <br>WE WRECK IT.</div></div></div>

Solution 2:

div elements are inherently block elements. In most occasions they will take up the width of the available space unless set with an explicit width or floated.

To have these elements display in a width proportional to the length of content it contains, declare them as inline-block

Example:

#home-img-text-description, #home-img-text-description2 {
    position: relative;
    margin: 30px0px;
    padding: 30px20px;
    color: #FFF;
    background: rgba(0,0,0,.8);
    font-size: 2.5em;
    line-height: 1.4em;
    box-sizing: border-box;
    display: inline-block;
}

Solution 3:

I think you need to give specific width to second container like below:

#home-img-text-description2 {
color: #efcd36;
font-size: 1.8em;
width:80%;
}