JSFiddle - React, Tailwind, and code Playground

HTML

<div id="hero-info">
 <div class="hero-skill-disc">
        <div class="hero-skill-pic"><img src="http://savepic.net/1711532.png" alt="" /></div>
        <div class="hero-skill-block">
            <h3>Солнечный свет</h3>

            <div class="hero-skill-text">
                Текст текст текс Текст текст текс Текст текст текс Текст текст текс Текст текст текс Текст текст текс Текст текст текс
            </div>
        </div>
    </div>
</div>

CSS

#hero-info {width: 678px;
           
             background: #000;}

        .hero-skill-pic, .hero-skill-block {
            float: left;
        }
        .hero-skill-pic {
            margin: 10px 10px 0 10px;

            
        }
        .hero-skill-block {
            width: 550px;
            border-left: 2px solid #FFF;
        }
        .hero-skill-disc {

            border: 2px solid #FFF;
        }