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.

Thank you in advance and best regards

Davza