JustifyText::Right behaves badly

## Bevy version

main ([8a523de](https://github.com/bevyengine/bevy/commit/8a523de8db28bfdc5b2a4c67c2022cc957075de6))

## What you did

rendered some text with `JustifyText::Right`

## What went wrong

the text layout is different to browser:

bevy:

browser:

the first bevy row is what i expected but i think i misunderstood something in the layout algo (the flex-grow spacer element doesn't work in the browser). either way, the layout is different from the browser equivalent.
also the text in the second bevy row is very blurry, maybe due to a partial pixel offset problem.

## Additional information

bevy:
```rust
use bevy::prelude::*;

fn main() {
App::new()
.add_plugins(DefaultPlugins)
.add_systems(Startup, setup)
.run();
}

fn setup(mut commands: Commands) {
commands.spawn(Camera2dBundle::default());

commands
// container
.spawn(NodeBundle {
style: Style {
flex_direction: FlexDirection::Column,
position_type: PositionType::Absolute,
left: Val::Px(100.0),
top: Val::Px(100.0),
..Default::default()
},
background_color: Color::GRAY.into(),
..Default::default()
})
.with_children(|commands| {
// row 1 - works ok
commands.spawn(NodeBundle{
style: Style {
flex_direction: FlexDirection::Row,
width: Val::Px(190.0),
// without height works as expected
// height: Val::Px(50.0),
..Default::default()
},
background_color: Color::PURPLE.into(),
..Default::default()
}).with_children(|commands| {
// spacer
commands.spawn(NodeBundle {
style: Style {
flex_grow: 1.0,
min_height: Val::Px(1.0),
min_width: Val::Px(1.0),
..Default::default()
},
background_color: Color::rgba(0.0, 1.0, 0.0, 0.25).into(),
..Default::default()
});

// text
commands.spawn(TextBundle {
text: Text::from_section("Some text that runs onto a second line", Default::default()).with_justify(JustifyText::Right),
..Default::default()
});
});

// separate by 100px
commands.spawn(NodeBundle{
style: Style {
height: Val::Px(100.0),
..Default::default()
},
..Default::default()
});

// row 2 - looks odd
commands.spawn(NodeBundle{
style: Style {
flex_direction: FlexDirection::Row,
width: Val::Px(190.0),
// with height >= 25 the alignment is wrong
height: Val::Px(35.0),
..Default::default()
},
background_color: Color::PURPLE.into(),
..Default::default()
}).with_children(|commands| {
// spacer
commands.spawn(NodeBundle {
style: Style {
flex_grow: 1.0,
min_height: Val::Px(1.0),
min_width: Val::Px(1.0),
..Default::default()
},
background_color: Color::rgba(0.0, 1.0, 0.0, 0.25).into(),
..Default::default()
});

// text
commands.spawn(TextBundle {
text: Text::from_section("Some text that runs onto a second line", Default::default()).with_justify(JustifyText::Right),
..Default::default()
});
});

});
}
```

browser css:
```css
.screen {
display: flex;
flex-direction: column;
position: absolute;
left: 100px;
top: 100px;
height: 200px;
background-color: #888888;
}

.row1 {
display: flex;
flex-direction: row;
width: 190px;
background-color: #7700ff;
}

.row2 {
display: flex;
flex-direction: row;
width: 190px;
height: 35px;
background-color: #7700ff;
}
.separate {
display: flex;
height: 100px;
}

.spacer {
display: flex;
flex-grow: 1;
min-width: 1px;
min-height: 1px;
background-color: #00ff00;
}

.text {
display: flex;
font-family: 'Fira';
font-size: 13px;
text-align: right;
}
```

html:
```html

```