CODEWITHSUNDEEP
css
Tony Hoan Trinh
Tony Hoan Trinh

Reputation: 485

How do I align these separate pieces of text with two elements on the left and an element on the right?

I want to do this:

enter image description here

However I'm having some issues with trying to have the Blue Link, the summary text and the Severity all align and having the severity on the far right.

I currently have this:

enter image description here

This is my code:

<div style={{ padding: 20, display: 'flex', 'justify-content': 'space-between' }}>
  <div>
    <p>
      <a id="hyperlink" target="_blank" href={link} style={{ paddingRight: 16}}>
        {element.key}
      </Hyperlink>

      {element.summary}
    </p>
           
    <a style={{ color: '#737373', 'font-size': '12px', 'line-height': '15px' }}>
      {element.severity.toUpperCase()}
    </a/>
  </div>
</div>

I was told I have to use justify-content: space-between but it seems to not be working?

Any help would be very appreciated, thank you so much!

Upvotes: 0

Views: 38

Answers (2)

Thomas Scheffer
Thomas Scheffer

Reputation: 554

First of your code is a mess: You use a element that's no HTML5 element, forget to close multiple elements etc

As for the desired result, you have only 1 item within your flex box.
Try the code blow to fix your issues

.flex{
  padding: 20; 
  display: flex; 
  justify-content: space-between;
}

.severity{
  color: #737373; font-size: 12px; line-height: 15px;
}

#hyperlink{
  padding-right: 16px
}
<div class="flex">
  <div>
    <p>
      <a id="hyperlink" target="_blank" href="{link}" >
        {element.key}
      </a>
    </p>
  </div>

  <div style="flex-grow:1;">
      <p>{element.summary}</p>
  </div>
  
  <div>
    <p>
      <a class="severity">
        {element.severity.toUpperCase()}
      </a>
    </p>
  </div>
</div>

Upvotes: 1

citykid
citykid

Reputation: 11040

your html has for instance a p element inside that prohibits flexbox.

flex-grow: 1 makes the middle element large once flexbox is in force.

<div style="display: flex; justify-content:space-between">

      <a>CSFID</a>
      <a style="flex-grow:1">Multiselect</a>                     
      <a >MINOR</a>

</div>

https://jsfiddle.net/wb104amk/1/

Upvotes: 0

Related Questions