Place a link at the bottom of text

I have the following code. I am trying to make add links at the bottom right under where the paragraph is there.

.allParent{
  background-color:gray;
    padding:10% 20%;
  }
.titleAll{
   width:100%;
   padding-top:5px;
   background-color:#fff;
   text-align:center;
 }
.titleAll h4{
   color:gray;
   margin:0;
 }
.parent {
   display: flex;
   flex-direction: row;
   padding: 10px;
    background-color:#fff;
   text-align:left;
 }

 .parent .child {
     padding-right: 10px;
     flex-grow: 1;
     width:50%;
    font-size:80%;

    }

  .parent .child:last-child {
     padding-right: 0;
   }

       .contentRight{
    position:absolute;
     bottom:30px;
    right:371px;
    }
    
           .allParent{
           background-color:gray;
    padding:10% 20%;
  }
.titleAll{
   width:100%;
   padding-top:5px;
   background-color:#fff;
   text-align:center;
 }
.titleAll h4{
   color:gray;
   margin:0;
 }
.parent {
   display: flex;
   flex-direction: row;
   padding: 10px;
    background-color:#fff;
   text-align:left;
 }

 .parent .child {
     padding-right: 10px;
     flex-grow: 1;
     width:50%;
    font-size:80%;

    }

  .parent .child:last-child {
     padding-right: 0;
   }

       .contentRight{
    position:absolute;
     bottom:30px;
    right:371px;
    }
<div class="allParent">
<div class="titleAll">
  <h4>Cats description</h4>
<div>
<div class="parent">
  <div class="child">
    <div class="content">
     <img src="http://www.cutestpaw.com/wp-content/uploads/2016/02/s-Schrodinger-as-a-kitten..png"  style="width:100%">

    </div>
  </div>
  <div class="child">
    <div class="content">Cats are similar in anatomy to the other felids, with a strong flexible body, quick reflexes, sharp retractable claws, and teeth adapted to killing small prey. Cat senses fit a crepuscular and predatory ecological niche. Cats can hear sounds too faint or too high in frequency for human ears, such as those made by mice and other small animals.</div>
   <div class="contentRight"><a target="_blank" rel="nofollow" href="">LINK HERE</a></div>
  </div>
</div>
<div class="titleAll">
  <h4>Cats description</h4>
<div>
<div class="parent">

  <div class="child">
    <div class="content">
     <img src="http://www.cutestpaw.com/wp-content/uploads/2016/02/s-Schrodinger-as-a-kitten..png"  style="width:100%">

    </div>
  </div>
  <div class="child">
    <div class="content">Cats are similar in anatomy to the other felids, with a strong flexible body, quick reflexes, sharp retractable claws, and teeth adapted to killing small prey. Cat senses fit a crepuscular and predatory ecological niche. Cats can hear sounds too faint or too high in frequency for human ears, such as those made by mice and other small animals.</div>
  </div>
</div>
</div>

Now under each <div class=”content”> where i am describing about the image , i am trying to provide two links at the bottom right of the paragraph. I have tried to do this in the first description but its all the way to the right. But i just want it right most bottom side under the text where the background is white.



If you wanted to move your link to the bottom right corner under your paragraph this is a way to do it using the css property ‘float’.

.allParent{
  background-color:gray;
    padding:10% 20%;
  }
.titleAll{
   width:100%;
   padding-top:5px;
   background-color:#fff;
   text-align:center;
 }
.titleAll h4{
   color:gray;
   margin:0;
 }
.parent {
   display: flex;
   flex-direction: row;
   padding: 10px;
    background-color:#fff;
   text-align:left;
 }

 .parent .child {
     padding-right: 10px;
     flex-grow: 1;
     width:50%;
    font-size:80%;

    }

  .parent .child:last-child {
     padding-right: 0;
   }

  .contentRight{
/*     position:absolute;
     bottom:30px;
    right:371px; */
    float: right; // Changes Are Here
    margin-right: 5px; // Changes Are Here
    }
<div class="allParent">
<div class="titleAll">
  <h4>Cats description</h4>
<div>
<div class="parent">
  <div class="child">
    <div class="content">
     <img src="http://www.cutestpaw.com/wp-content/uploads/2016/02/s-Schrodinger-as-a-kitten..png"  style="width:100%">

    </div>
  </div>
  <div class="child">
    <div class="content">Cats are similar in anatomy to the other felids, with a strong flexible body, quick reflexes, sharp retractable claws, and teeth adapted to killing small prey. Cat senses fit a crepuscular and predatory ecological niche. Cats can hear sounds too faint or too high in frequency for human ears, such as those made by mice and other small animals.</div>
   <div class="contentRight"><a target="_blank" rel="nofollow" href="">LINK HERE</a></div>
  </div>
</div>
<div class="titleAll">
  <h4>Cats description</h4>
<div>
<div class="parent">

  <div class="child">
    <div class="content">
     <img src="http://www.cutestpaw.com/wp-content/uploads/2016/02/s-Schrodinger-as-a-kitten..png"  style="width:100%">

    </div>
  </div>
  <div class="child">
    <div class="content">Cats are similar in anatomy to the other felids, with a strong flexible body, quick reflexes, sharp retractable claws, and teeth adapted to killing small prey. Cat senses fit a crepuscular and predatory ecological niche. Cats can hear sounds too faint or too high in frequency for human ears, such as those made by mice and other small animals.</div>
  </div>
</div>
</div>

Do you want it like this?

Are you looking for something like this ? Check jsfiddle.

                .contentRight{
                       margin-top:15px;
                       float:right;

                       }


     https://jsfiddle.net/k8596ewL/

if you want to set the position absolute, but you want to set it in relation with the parent container and not to the window, use this:

.parent{
position:relative;
}

.child{
position:absolute;
top://top position from the parent
right://right position from the parent
}