JSFiddle - React, Tailwind, and code Playground

by Evgeniy Lukovsky

HTML

<div id="feed">
    <div class="post">
        <div class="head"></div>
        <div class="pbody">
            
            <div class="img"></div>
            <span>Я охуенный автор.</span>
            <span>я охуенная книга <span class="btncontainer">
                <!-- <div class="removebtn">x</div> -->
                <input type="button" value="читать" />
            </span></span>
            
            <!-- <div style="clear:both;"></div> -->
            <p> djfklsjfsl f dkfjdslf ds dsf dkf ldsf dsl fdslf dslkfjdkfjkds fds f dsf</p>

        </div>
    </div>
</div>

CSS

div#feed {
    width:400px;
    background: light-gray;
    height:800px;
}
div.post {
    position: relative;
    background: yellow;
}
div.head {
    position: relative;
    height: 50px;
    background: gray;
}
div.pbody {
    position: relative;
    height:100px;
    background: green;
    float: left;
    width: 100%;
}
div.img {
    position: relative;
    width: 50px;
    height:70px;
    background: red;
    float: left;
}
div.subbody {
    position: relative;
    width: 350px;
    height:50px;
    background: blue;
    float: left;
}
div.text {
    position: relative;
    /* max-width: 250px; */
    background: yellow;
    float: left;
    height: 50px;
}
span.btncontainer {
    position:relative;
    /* float:left; */
    background: white;
    width:50px;
    height: 20px;
    display:inline-block;
}
div.pbody > div.img + span {
    font-weight: bold;
}

div.pbody > p{
    margin: 0px;
    /* float: left; */
    position: relative;
}
div.pbody > *{
    /* float:left; */
    /* position:relative; */
}