HTML & CSS Struggle with column and placement of text

[Mateusz]

I am very new to coding, currrently i am struggling with alignment of some elements in my div.
Here is the stuff i am trying to code (made in adobe XD) This is what it must look like

This is what i currently made in css plus html:
HTML:

<div class="row">
        <div class="column">
            <div class="timesiden">
                <div>1 time siden</div>
            </div>
            <p>Hej alle. Jeg søger en multimediedesigner til mit Kommende projekt, håber i vil hjælpe. Jeg har br..</p>
        </div>

    </div>

CSS:

                                                                                        .column {
                                                                                        float: row;
                                                                                        width: 30%;
                                                                                        height: 150px;
                                                                                        margin: auto;
                                                                                        padding: 50px;
                                                                                        background-color: #E3F1F0;
                                                                                        border-radius: 15px;
                                                                                    }
                                                                                    /* Clear floats after the columns */
                                                                                   
                                                                                    .row:after {
                                                                                        content: "";
                                                                                        display: table;
                                                                                        clear: both;
                                                                                    }
                                                                                   
                                                                                    .timesiden {
                                                                                        vertical-align: text-top;
                                                                                    }

I am struggling a lot with the placement of the class "timesiden" that i made in on the of divs. I cant do anything to make it go to the top right corner .
My other question is how can i allign "like icon" and "comment icon" as viewed in Adobe XD.
Hope its understandable.
I hope i have posted it the right way by the rules, if not then i apologize.

 

[Mateusz]

I managed to create this

<div class="row">
        <div class="column">
            <div class="timesiden">
                <div>1 time siden</div>
                <div class="profile">
                    <i class="fa fa-user" aria-hidden="true"></i>
                </div>
            </div>
            <p>Hej alle. Jeg søger en multimediedesigner til mit Kommende projekt, håber i vil hjælpe. Jeg har br........................ Se Mere</p>

            <div><a class="like"><i class="fa fa-thumbs-up"></i>
<div class="comment">
    <div><i class="fa fa-comments"></i>
    </div>
</div>
</div>
</div>
</div>

But when i try to copy paste the code, so i will have 2nd column, it doesnt appear the same as the first one, and i have no idea why.
This is what happens after copy paste the code:

Sorry for the big images 🙁
I have no idea why the copy pasted one doesnt look the same as the 1nd.

 

[Johna]

Can I see your CSS after you added the second column, or is that the same as the CSS before?

 

[Mateusz]

I dont think i have added second column, i just thought if i make one column with those icons, i could copy paste it 3 times and i will have three.
But its possibly not working like that..

I tried to copy paste the first column in HTML, with the same css for the first column.

.column {
    float: row;
    margin: auto;
    width: 30%;
    height: 180px;
    padding: 50px;
    background-color: #E3F1F0;
    border-radius: 15px;
}


/* Clear floats after the columns */

.row:after {
    content: "";
    display: inline-block;
    clear: both;
}

.timesiden {
    text-align: right;
    margin-top: -40px;
    margin-bottom: 20px;
}

.like {
    margin: -40px;
    font-size: 35px;
    color: #548288;
    cursor: pointer;
}

.comment {
    text-align: right;
    margin: -40px;
    font-size: 35px;
}

.profile {
    font-size: 40px;
    text-align: left;
    cursor: pointer;
    margin-block-start: -20;
    color: #548288;
}

I know its a mess.. But i havent learn how to organize code yet. I just started coding.
i had tons of problems trying to allign those 3 icons as well, i know they shouldnt be alligned like that, but it kinda works.
I think i messed up some divs as well

.profile - is for profile icon
.comment - is for comment icon
.like - is for like icon
.timesiden - is for the text on the right top corner it means " one hour ago"
The idea with this, is that it has to look like somebody who "posted" something.

But they are somehow linked together, when i change lets say size of like icon the size of command icon changes too. I might have created too many classes in wrong divs, but i have no idea. Have been sitting few hours now trying to fix it, hehe .

 

[Mateusz]

I think i have tried everything in my power so far, and the absolute no knowledge about coding, i cant figure it out.
Hope some of you Pros knows what i am doing wrongly.

 

[OldMan]

.column {
float: row;

float does not have a 'row' property.