How to apply display flex to some childs

[newcoder1010]

Hello,

HTML

<section data-quickedit-entity-id="block_content/56" id="block-portfolio1" class="col-md-12 col-lg-12 col-xs-12 col-sm-12 portfolio-one portfolio contextual-region block block-block-content block-block-contentb542f11a-fbd5-4ebe-8669-f57d84c42429 clearfix" data-quickedit-entity-instance-id="0">
  
<h2 class="block-title">Portfolio 1</h2>
<div data-contextual-id="block:block=portfolio1:langcode=en|block_content:block_content=56:changed=1600966868&amp;langcode=en" data-contextual-token="tCd_R3tnlsGqN3Xah99BjMqmcUUXb1goeAqz0iUHUOg" class="contextual"><button class="trigger visually-hidden focusable" type="button" aria-pressed="false">Open Portfolio 1 configuration options</button><ul class="contextual-links links" hidden=""><li class="quickedit"><a href="" role="button" aria-pressed="false">Quick edit</a></li><li class="block-configure"><a href="/admin/structure/block/manage/portfolio1?destination=/portfolios">Configure block</a></li><li class="block-contentblock-edit"><a href="/block/56?destination=/portfolios">Edit</a></li></ul></div>
<div data-quickedit-field-id="block_content/56/field_image/en/full" class="field field--name-field-image field--type-image field--label-above quickedit-field">
<div class="field--label">Image</div>
<div class="field--item">  <img src="/sites/default/files/2020-09/logo-blue.png" width="381" height="218" alt="kk" typeof="foaf:Image" class="img-responsive">

</div>
</div>

<div data-quickedit-field-id="block_content/56/field_value/en/full" class="field field--name-field-value field--type-integer field--label-above quickedit-field">
<div class="field--label">Value</div>
<div content="7777" class="field--item">$7777</div>
</div>

<div data-quickedit-field-id="block_content/56/field_units/en/full" class="field field--name-field-units field--type-integer field--label-above quickedit-field">
<div class="field--label">Units</div>
<div class="field--item">786786</div>
</div>

<div data-quickedit-field-id="block_content/56/field_states/en/full" class="field field--name-field-states field--type-list-string field--label-above quickedit-field">
<div class="field--label">States</div>
<div class="field--items">
          <div class="field--item">Arizona</div>
          <div class="field--item">Florida</div>
          <div class="field--item">Iowa</div>
          <div class="field--item">Vermont</div>
              </div>
      </div>

  </section>

.portfolio {
display: flex;}

I wanted three fields to have the same height so I used display:flex to the parent. Problem is that it applies to all the childs. Instead, I like same height to the following childs only: Value, Units and States.

Thank you!

 

[Sherin]

You can use flex-grow property in your css .

.field-item{

flex-grow:<number>

}

For further details you follow  this link:

https://css-tricks.com/almanac/properties/f/flex-grow/