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

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.

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.