CODEWITHSUNDEEP
htmlcss
learningswift
learningswift

Reputation: 101

html/css align text with icon in new line

I have a following code, basically just an icon and text in rows. When text goes into new line it starts from the beginning and I would like to move it to the right so text is always in the line with the icon. It should always start in the same line, where the first line started where I have an icon.

    <html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        .segmentLabel {
            background-color: #f9f9f9;
            padding: 15px;
            border: solid 1px #ebebeb !important;
            border-radius: 10px !important;
            word-break: break-word;
        }
        
    </style>
</head>
<body>
<div class="row">
    <div class="col-xs-8" style="padding-top: 5px">
        <a class="link" href="javascript:void(0);" data-time="${time}">
            <span class="text-left segmentLabel" style="padding-top: 3px">
                <i class="fa fa-road text-left"></i> This is just a sample text. This is just a sample text. This is just a sample text. This is just a sample text. This is just a sample text.
            </span>
        </a>
    </div>
    <div class="col-xs-4" style="padding-top: 5px">  
        <span class="text-left segmentLabel" style="padding-top: 3px">
                This is just a sample text.
            </span>
    </div>
</div>
<body>
<html>

As you can see if you run example I want to get text in line with icon.

example

Upvotes: 0

Views: 2728

Answers (2)

Fahad Shinwari
Fahad Shinwari

Reputation: 968

Full Code: https://codesandbox.io/s/eager-brattain-ip63b?file=/style.css:41-75

  • Apply this property on segmentLabel class.

        display: flex;

Full Code:

     <div class="col-md-8">
       <a class="link">
        <span class="text-left segmentLabel">
          <i class="fa-fa road text-left"></i>
          <p>hi</p>
        </span>
       </a>
      </div>

CSS: .

     segmentLabel {
       display: flex;
     }

Upvotes: 1

Erick Jones
Erick Jones

Reputation: 109

I tried to reproduce it using your piece of code and it didn't break to the next line. However in order to force it to the same line you can try this:

.segmentLabel {
  display: flex;
  flex-direction: row;
}

You can also apply:

display: inline-block;

Please let us know if this worked.

Upvotes: 0

Related Questions