How to make div display top aligned with adjacent elements

After quite a bit of googling and searching around on here I haven't been able to find a solution to my problem. I am not able to display the trashcan icons the way I need them to be displayed. The paragraphs in the html body are inserted dynamically and can have varying heights so I want to display and align the trash can icons to the top of each of the adjacent paragraphs. How can I do this using css/html? See below for current behavior.

label {
  font-size: larger;
}

div#output-container {
  float: left;
  display: block;
  width: 90%;
}

div#output-container h2 {
  text-align: center;
}

div.text {
  float: left;
  width: 40%;
  margin: 1%;
}

div.text p {
  word-break: break-all;
}

form {
  float: left;
  width: 50%;
}

mark {
  background: #FF5733;
  color: black;
}

h1.columns {
  float: left;
  width: 48%;
  margin: 1%;
}

.container-top {
  display: block;
  width: 100%;
}

.container-bottom {
  border-top: .25rem solid;
  display: inline-block;
  width: 90%;
}

.column {
  float: left;
  width: 45%;
  margin: 0%;
}

#input-text {
  background: #f7f7f7;
  width: 100%;
  height: 350px;
}

div#original-highlighted-text {
  margin-top: 1.5%;
}

.lowercolumns p {
  border-right: 3px dashed;
  border-bottom: 3px solid;
}

#text-form {
  margin-bottom: 10px;
}

i {
  align-items: center;
  padding: 5px;
  font-size: 20px;
}

div.icon-div.text {
  width: 100px;
  margin: 1%;
}

div.icon-div span {
  width: 100px;
  margin: 1%;
}

#delete-column {
  width: 10%;
}

#delete-column h2 {
  margin-bottom: 10px;
}

.container-delete {
  display: inline-block;
}

<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="app.css">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>

<body>
  <div class="container-bottom">
    <!-- <i class="fas fa-trash-alt"></i> -->
    <div id="output-container">
      <!-- <h2>Original Text</h2> -->
      <!-- <div id="original-highlighted-text" class="text">
                    <h2>Change Preview</h2>
                    <p id=highlightedp></p>
                </div> -->
      <div id="original-text" class="text lowercolumns">
        <h2>Original Text</h2>
        <p>asdfasdfadf</p>
        <p>asdfasdf<br>asdfasdf<br>asdfasdf</p>
        <p>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf</p>
      </div>
      <!-- <h2>Changed Text</h2> -->
      <div id="outputted-text" class="text lowercolumns">
        <h2>Changed Text</h2>
        <p>asdfasdfadf</p>
        <p>asdfasdf<br>asdfasdf<br>asdfasdf</p>
        <p>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf</p>
      </div>
      <div id="delete-column" class="text lowercolumns">
        <h2>Delete</h2>
        <div class="container-delete">
          <div class="icon-div text"><span><i class="fas fa-trash-alt"></i></span></div>
        </div>
        <div class="container-delete">
          <div class="icon-div text"><span style="
    width: 200px;
"><i class="fas fa-trash-alt"></i></span></div>
        </div>
        <div class="container-delete">
          <div class="icon-div text"><span><i class="fas fa-trash-alt"></i></span></div>
        </div>
      </div>
    </div>
  </div>
  <script src="app.js" async="" defer=""></script>
  <script src="mark.min.js"></script>

</body>

</html>

If you need to save the current html structure, then you can solve this problem using the css properties display: grid and display: contents. It's not the best solution, but it works. Example below:

label {
  font-size: larger;
}

div#output-container {
  float: left;
  display: block;
  width: 90%;
}

div#output-container h2 {
  text-align: center;
}

div.text {
  float: left;
  width: 40%;
  margin: 1%;
}

div.text p {
  word-break: break-all;
}

form {
  float: left;
  width: 50%;
}

mark {
  background: #FF5733;
  color: black;
}

h1.columns {
  float: left;
  width: 48%;
  margin: 1%;
}

.container-top {
  display: block;
  width: 100%;
}

.container-bottom {
  border-top: .25rem solid;
  display: inline-block;
  width: 90%;
}

.column {
  float: left;
  width: 45%;
  margin: 0%;
}

#input-text {
  background: #f7f7f7;
  width: 100%;
  height: 350px;
}

div#original-highlighted-text {
  margin-top: 1.5%;
}

.lowercolumns p {
  border-right: 3px dashed;
  border-bottom: 3px solid;
}

#text-form {
  margin-bottom: 10px;
}

i {
  align-items: center;
  padding: 5px;
  font-size: 20px;
}

div.icon-div.text {
  width: 100px;
  margin: 1%;
}

div.icon-div span {
  width: 100px;
  margin: 1%;
}

#delete-column {
  width: 10%;
}

#delete-column h2 {
  margin-bottom: 10px;
}

.container-delete {
  display: inline-block;
}

/*
  !!! below are the new CSS changes !!!
*/

div#output-container {
  display: grid;
  grid-auto-flow: column;
}

div.text {
  display: contents;
}


div.text:nth-child(1) > * {
  grid-column: 1;
}

div.text:nth-child(2) > * {
  grid-column: 2;
}

div.text:nth-child(3) > * {
  grid-column: 3;
}

<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="app.css">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>

<body>
  <div class="container-bottom">
    <!-- <i class="fas fa-trash-alt"></i> -->
    <div id="output-container">
      <!-- <h2>Original Text</h2> -->
      <!-- <div id="original-highlighted-text" class="text">
                    <h2>Change Preview</h2>
                    <p id=highlightedp></p>
                </div> -->
      <div id="original-text" class="text lowercolumns">
        <h2>Original Text</h2>
        <p>asdfasdfadf</p>
        <p>asdfasdf<br>asdfasdf<br>asdfasdf</p>
        <p>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf</p>
      </div>
      <!-- <h2>Changed Text</h2> -->
      <div id="outputted-text" class="text lowercolumns">
        <h2>Changed Text</h2>
        <p>asdfasdfadf</p>
        <p>asdfasdf<br>asdfasdf<br>asdfasdf</p>
        <p>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf</p>
      </div>
      <div id="delete-column" class="text lowercolumns">
        <h2>Delete</h2>
        <div class="container-delete">
          <div class="icon-div text"><span><i class="fas fa-trash-alt"></i></span></div>
        </div>
        <div class="container-delete">
          <div class="icon-div text"><span style="
    width: 200px;
"><i class="fas fa-trash-alt"></i></span></div>
        </div>
        <div class="container-delete">
          <div class="icon-div text"><span><i class="fas fa-trash-alt"></i></span></div>
        </div>
      </div>
    </div>
  </div>
  <script src="app.js" async="" defer=""></script>
  <script src="mark.min.js"></script>

</body>

</html>

Nevertheless, I still recommend reviewing your html structure, for tabular (display: table) or grid-based (display: grid),

PHP object property false evaluation with operator "==" [duplicate]

AWS SNS Get Certificate and Private key from .p12 file for Apple APNS

Count of values in one column based on another column

How do I install p4python on macOS 10.15 Catalina?

"Expected end of line but found unknown token." while running AppleScript in swift

Convert string into date format in R

Accessing StackExchange API behind a firewall - are there IP ranges to whitelist? [migrated]

Find $f(x)$ such that $f(x)+f\left(\frac{1}{x}\right)=f(x)\cdot f\left(\frac{1}{x}\right)$

Is there a way to write this expression differently: $\arctan 1/(1+n+n^2)$?

Why is $Sp(2m)$ as regular set of $f(A)=A^tJA-J$, and, hence a Lie group.

Proof of a binomial identity $\sum_{k=0}^n {n \choose k}^{\!2} = {2n \choose n}.$