JSFiddle - React, Tailwind, and code Playground

by Radioactive

HTML

<div class="blocktop">
    <div class="bltimg">
        <img src="#" alt="#"/>
    </div>
    <div class="bltcon">
        <span><b>Имя:</b>Петрович</span>
        <span><b>ДР:</b>12:12:12 12:12</span>
        <span><b>Адрес:</b>Польша, Бедлево</span>
    </div>
</div>

CSS

.blocktop{width:100%;border:1px solid #ddd;}
    .bltimg{float:left;width:110px;}
        .bltimg img{min-height:100px;width:100%;max-width:100px;margin:-1px 0 0 -1px;}
    .bltcon{overflow:hidden;min-height:98px;}
        .bltcon span{display:block;line-height:24px;}
            .bltcon span b{min-width:50px;display:block;float:left;}

	@media all and (max-width:302px){
    .bltimg{float:none;width:100px;margin:8px;}.bltcon{margin:5px;min-height:100%;}
	}