Need help adding plane to be on a line-CodePudding

I had initially had the design as a content value in css but tried changing it to be its own div and testing to see if it's a structure issue. I just need the plane to be exactly on the very end of the thicker part of the line.

Image of how painfully close it is:

#two {
  background-size: 100%;
  background-image: linear-gradient(to right, #ffffff, #000000);
  margin-right: 200px;
  margin-left: 80px;
  overflow: visible;
  height: 1px;
  padding: 0.0em 0.0em 0.0em 0.0em;
  border-bottom: 10px;
}

.divider {
  border: 1em 1em 1em 1em;
  padding: 1em 1em 1em 1em;
}

.plane {
  padding: 0.5em 0.5em 0.5em 0.5em;
  margin-left: 1150px;
  margin-bottom: 100px;
}

<div class="divider">
  <div id="two"></div>
  <div class="plane">✈</div>
</div>

CodePudding user response：

#two {
  background-size: 100%;
  background-image: linear-gradient(to right, #ffffff, #000000);
  overflow: visible;
  height: 1px;
  padding: 0;
  border-bottom: 10px;
}

.divider {
  position: relative;
  padding: 1em;
  margin-top: 70px;
}

.plane {
  position: absolute;
  top: -1px;
  right: 0;
  padding: 0.5em;
  bottom: 0;
}

<div class="divider">
  <div id="two"></div>
  <div class="plane">✈</div>
</div>

CodePudding user response：

#two {
  background-size: 100%;
  background-image: linear-gradient(to right, #ffffff, #000000);
  margin-right: 200px;
  margin-left: 80px;
  overflow: visible;
  height: 1px;
  padding: 0.0em 0.0em 0.0em 0.0em;
  border-bottom: 10px;
}

.divider {
  position: relative;
}

.plane {
  position: absolute;
  top: -.7rem;
  right: 12rem;
  margin-left: 0;
  margin-right: 0;
}

<div class="divider">
  <div id="two"></div>
  <div class="plane">✈</div>
</div>

CodePudding user response：

The simple thing you can do is just add position: absolute; and Top: 4px; on .plane

#two {
  background-size: 100%;
  background-image: linear-gradient(to right, #ffffff, #000000);
  margin-right: 200px;
  margin-left: 80px;
  overflow: visible;
  height: 1px;
  padding: 0.0em 0.0em 0.0em 0.0em;
  border-bottom: 10px;
}

.divider {
  border: 1em 1em 1em 1em;
  padding: 1em 1em 1em 1em;
}

.plane {
  padding: 0.5em;
  margin-left: 1145px;
  margin-bottom: 100px;
  position: absolute;
  right: 0;
  margin-right: 200px;
  top: 4.3px;
}

<div class="divider">
  <div id="two"></div>
  <div class="plane">✈</div>
</div>