The flex-end CSS feature is unresponsive

Question

I have a flex grid set up as featured. Can anyone see why Dreamweaver is ignoring the justify-content: flex-end; CSS attribute?

I want the width of the Content tag to just fit the width of the content and to align itself to the right of the grid. At the moment, it's just staying at a 50% width.

Why is Dreamweaver ignoring this? I have even tried align-self: flex-end; & align-content: flex-end; and this is till being ignored.

By the way, the text is just filler ;)

.grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows:auto;
    grid-template-areas: 
        "title title"
        "textarea key-information";
    grid-gap: 20px;
    margin-top: 30px;
}

.title{
    grid-area: title;
    color:#707070;
    border-bottom: 2px solid #3A83F3;
}

.textarea{
    grid-area: textarea;
}

.textarea h3:after{
    font-family: fontAwesome;
    content: "\f3ef";
}

.key-information{
    grid-area: key-information;
    border-radius: 5px;
    padding: 20px;
    align-self: flex-end;/*This atribute should work*/
  justfy-self:flex-end;/*This is also inserted to show to neither are responsive*/
    color: #550AF1;
    font-size: 14px;
    border-left: 2px solid #3A83F3;
}

.key-information ul{
    margin: 0px;
    padding: 0px;
    list-style-type: none;
  width:20px; /*This has been inserted to show how the parent tag is being unresponsive to the "justify-self:flex-end" attribute*/
}

.key-information li{
    display: block;
    padding: 10px 0px;
}

.key-information a{
    text-decoration: none;
}

.key-information a:hover{
    text-decoration: underline;
}

.tag:before{
    font-family: fontAwesome;
    padding-right: 10px;
}

.download:before{
    content: "\f063";
}

.vat:before{
    content: "\f02b";
}

.registration-number:before{
    content: "\f3ef";
}

.email:before{
    content: "\f1d8";
}

.home:before{
    content: "\f015";
}

.pdf-download:before{
    content: "\f1c1";
}

.chevron:before{
    content: "\f054";
}

.people:before{
    content:"\f500";
}

.person:before{
    content: "\f4fc";
}

<div class="grid">
            <div class="title"><h2>Title</h2></div>
            <div class="textarea">
                <h3>Please allow me to introduce myself I'm a man of wealth and taste. I've been around for a long, long year, Stole many a man's soul to waste</h3>
                <p>I was around when Jesus Christ had his moment of doubt and pain made damn sure the pilate washed his hands and sealed his fate</p>
                <p>Pleased to meet you hope you guess my name, what's puzzling you Is the nature of my game.</p>
            </div>
            <div class="key-information">
                <ul>
                    <li class="tag home"><strong>Write to us:</strong> </li>
                    <li class="tag email"><strong>Message us: </strong></li>
                    <li class="tag vat"><strong>VAT Number: </strong></li>
                    <li class="tag registration-number"><strong>Company Number: </strong></li>
                    <li class="tag pdf-download"><a href="#"></a></li>
                    <li class="tag people"><strong>Institutional Shareholders: </strong><br/></li>
                    <li class="tag person"><strong>Managing Director: </strong></li>
                </ul>
            </div>
        </div>