I want different text in the same line positioned to the left and right inside a table cell-CodePudding

I am making a school timetable mock in HTML and CSS and I am having troubles with one specific thing and that is having 2 different pieces of text in the same line one positioned to the top left and the other to the top right. I have tried using float but that makes the text move down to text that is under it.

Here is the code used: https://jsfiddle.net/zhu2a1y4/

Here is the HTML code:

    <table class="separated">
        <tr>
            <td>
                <div class='cell_header'>
                    <p class="group">s1</p>
                    <p class="classroom">N228</p>
                <div>
                <h3>S: ICT</h3>
                <p>KOH</p>
            </td>
        </tr>
        <tr>
            <td>
                <p>s1 N228</p>
                <h3>L: ICT</h3>
                <p>KOH</p>
            </td>
        </tr>
    </table>

And here is the CSS:

*{
padding: 0px;
}
table, td {
    border: solid black 1px;
    border-collapse: collapse;
    text-align: center;
    column-width: 200px;
    height: 100%;
}
.separated td, .separated{
    border: 0px;
    border-bottom: 1px solid black;
    height: 100%;
}
.cell_header p {
    display: inline;
    position: relative;
    overflow: auto;
    margin-top: 0;
}
.classroom{
    text-align: right;
    float: right;
}
.group{
    text-align: left;
    float: left;}

As you can see in the example the text "s1" and "N228" are Next to "S:ICT" and my objective is to have both of the pieces of text higher up in the corners.

Any help would be much appreciated.

Thank you in advance and best regards

Davza

CodePudding user response：

I dont know why you are using floats for a table, but still, the solution to your problem is simple. Just add this to your css and you are good to go.

.classroom{
    text-align: right;
    float: right;
    position: relative;
    top: -15px;
}
.group{
    text-align: left;
    float: left;
    position: relative;
    top: -15px;
}

How did this solve the problem? --> It's simple, you are setting the positions of those two elements to be relative, and then change the top to -15px so the text goes 15px above its original position.

Also, if you want to change how high the elements should go, just change the top: ; value to whatever you like.